<Link>单击时冻结页面

Question

I'm building a piece of music streaming app with a Rails backend and react-redux frontend. A react-router Link from an artist index to an art show is freezing the browser.

Links in other parts of the page are working fine, including Links to artist show pages. This Link works with an 'open in new tab' right click.

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

All other Links are working properly. This is receiving the props correctly, and changing the browser's url, just not actually completing the redirect. In fact, it freezes up the browser completely. Artist Show is working.

Answer 1

When you want to use react-router-dom, you should use Router, Switch, Route, Link from "react-router-dom"

for example, consider these files:

in 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'));

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

and then in your target file:

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