<Link> замораживание страницы при нажатии

Question

Я создаю приложение для потоковой передачи музыки с бэкэндом Rails и интерфейсом Reaction-Redux. Реактор-роутер. Ссылка из списка артистов на арт-шоу замораживает браузер.

Ссылки в других частях страницы работают нормально, в том числе ссылки на страницы шоу артиста. Эта ссылка работает с щелчком правой кнопкой мыши «открыть в новой вкладке».

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

Если вы хотите использовать response-router-dom, вы должны использовать Router, Switch, Route, Link , например, из "response-router-dom"

, рассмотрите эти файлы:

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