React Router работает над перезагрузкой, но не при нажатии на ссылку

Я установил React с react-router версии 4. Маршрутизация работает при вводе URL-адреса непосредственно в браузере, однако, когда я нажимаю на ссылку, URL-адрес изменяется в браузере (например, http://localhost:8080/categories), но контент не обновляется (но если я обновляюсь, он обновляется).

Ниже приведена моя настройка:

Настройка Routes.js выполняется следующим образом:

import { Switch, Route } from 'react-router-dom';
import React from 'react';

// Components
import Categories from './containers/videos/Categories';
import Videos from './containers/videos/Videos';
import Home from './components/Home';

const routes = () => (
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/videos" component={Videos}/>
    <Route path="/categories" component={Categories}/>
  </Switch>
);

export default routes;

Ссылка, которую я использую в Nav.js, выглядит следующим образом:

<Link to="/videos">Videos</Link>
<Link to="/categories">Categories</Link>

App.js выглядит следующим образом:

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav from './Nav';

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

Ответы

Ответ 1

Обертка вашего компонента с помощью withRouter должна выполнить эту работу для вас. withRouter необходим для компонента, который использует Link или любые другие реквизиты Router и не получает Router props либо непосредственно из Route, либо из Parent Component

Реквизиты маршрутизатора доступны для компонента, когда его называют "

<Route component={App}/>

или

<Route render={(props) => <App {...props}/>}/>

или если вы помещаете Links в качестве прямых дочерних элементов тега Router, например

<Router>
     <Link path="/">Home</Link>
</Router>

Если вы хотите записать дочерний контент в Router в качестве компонента, например

<Router>
     <App/>
</Router>

Репозитории Router не будут доступны для приложения, и, следовательно, вы можете передать вызов с помощью маршрута, например

<Router>
     <Route component={App}/>
</Router>

Однако withRouter поставляется в Handy, если вы хотите предоставить реквизиты маршрутизатора высоко вложенному компоненту. Проверьте это решение

import {withRouter} from 'react-router'

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default withRouter(AppComponent);

Ответ 2

Я бы просмотрел ваши компоненты и удостоверился, что у вас есть только один <Router> ... </Router>. Кроме того, убедитесь, что у вас есть <Router>...</Router>. Иногда могут быть случаи, когда вы используете более одного, но если у вас случайно есть вложенные маршрутизаторы (потому что вы быстро взломали и забыли удалить его, когда вы перемещали его ко всем виды мест;-) - это может вызвать проблему.

Я бы попробовал

import {
  BrowserRouter as Router,
}  from 'react-router-dom'

// Other Imports

...

return (
  <Router>
    <div className="index">
      <Nav /> <!-- In this component you have <Links> -->
      <div className="container">
        <Routes />
      </div>
    </div>
  </Router>
);

В верхней части списка (App.js).

Ответ 3

У меня была точно такая же проблема, но моя причина была намного проще.

В моем случае у меня был пробел в конце строки URL:

<Link to={ "/myentity/" + id + "/edit " } >Edit</Link>

Не будет работать, когда я нажму на ссылку, но URL-адрес будет обновляться в адресной строке. Нажатие на адресную строку браузера и нажатие клавиши enter будет работать правильно.

Удаление места исправило это:

<Link to={ "/myentity/" + id + "/edit" } >Edit</Link>

Я предполагаю, что это довольно очевидно, но легко не заметить. Несколько волос были стянуты, прежде чем я заметил (и, очевидно, я оказался здесь), надеюсь, это спасет кого-то еще несколько волосков.

Ответ 4

Порядок включения компонента также важен в вашем файле index.js. BrowserRouter, поставщик, а затем приложение.

ReactDOM.render(
  <BrowserRouter>
      <Provider store={store}>
          <App />
      </Provider>
  </BrowserRouter>,
  document.getElementById('app')
);

Ответ 5

Я сталкивался с этим, потому что я не установил react-router в зависимостях приложения (package.json)...

Ответ 6

Во всем приложении должен быть только один ROUTER, и я думаю, что если ваш головной файл - App.js, то ROUTER должен обернуть весь компонент App.js.

Ответ 7

Возможно, две вещи:

Вы импортировали { Link } from 'react-router-dom' в свой файл Nav.js?
Возможно, ошибка орфографии/капитализации: Вы экспортируете export default routes (нижний регистр), но import Routes from './../routes (верхний регистр).