<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>