javascript < Link>单击时冻结页面

vhmi4jdf 于 2023-01-11 发布在 Java

关注(0)|答案(1)|浏览(131)

我正在用Rails后端和react-redux前端构建一个音乐流媒体应用程序，一个从艺术家索引到艺术展的react-router链接冻结了浏览器。
在页面的其他部分的链接工作正常，包括链接到艺术家显示页面。此链接与“在新标签页打开”右键单击工作。

// from artist_index.jsx
import React from 'react';
import { Link } from 'react-router-dom';

class ArtistIndex extends React.Component {
  render() {
    return (
      <div className="artist-index">
        <ul className="artist-index-list">
          {this.props.artists.map(artist => {
            return <li key={artist.id}>
              <Link to={`/artist/${artist.id}`}>{artist.name}</Link>
            </li>
          })}
        </ul>
      </div>
    );
  };
};

export default ArtistIndex;

// from root.jsx
import React from 'react';
import { Provider } from 'react-redux';
import { HashRouter } from 'react-router-dom';
import App from './App';

const Root = ({ store }) => (
  <Provider store={store}>
    <HashRouter>
      <App />
    </HashRouter>
  </Provider>
);

export default Root;

所有其他链接都工作正常。这是正确接收 prop ，并改变浏览器的网址，只是没有真正完成重定向。事实上，它完全冻结了浏览器。艺术家显示工作。

JavaScript

来源：https://stackoverflow.com/questions/55785897/link-freezing-page-when-clicked

1条答案

按热度按时间

jfewjypa1#

当您想使用react-router-dom时，您应该使用“react-router-dom”中的 * 路由器，交换机，路由，链路 *
例如，考虑以下文件：
在索引.js中

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './app/App';

ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>, document.getElementById('root'));

在应用程序js中

import React from "react"
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"

import categoryIndex from "../components/category/index"
import productIndex from "../components/product/index"

clas App extends Component {
   render(){
     return (
      <Router>
        <div className="container"
          <Link to={"/category/index"} className="nav-link">
            Categories
          </Link>
          <Link to={"/products/index"} className="nav-link">
            Products
          </Link>
        <Switch>
          <Route path="/category/index" component={categoryIndex} />
          <Route path="/product/index" component={productIndex} />
        </Switch>
      </div>
    </Router>
  );
 }
}

export default App;

然后在目标文件中：

<div id='createNewProduct'>
    <Link to={"/product/create"}>
       + Create New Product
    </Link>
</div>

赞(0）回复(0）举报 2023-01-11

我来回答

javascript < Link>单击时冻结页面

1条答案

相关问题

热门标签

最新问答