<Link>单击时冻结页面

Question

我正在用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;

所有其他链接均正常运行。 这是正确接收道具，并且正在更改浏览器的url，只是实际上并未完成重定向。 实际上，它完全冻结了浏览器。 艺术家表演正在工作。

Answer 1

当您要使用react-router-dom时，应使用“ react-router-dom”中的Router，Switch，Route，Link

例如，考虑以下文件：

在index.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'));

在App.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>