0

Возникла проблема, что при использовании Router нажимая на NavLink изменяется путь в адресной строке, но не отрисовывается сам компонент и приходится перезагружать сайт, чтобы увидеть этот самый компонент. Т.е. если вкратце, то класс active у ссылок меняется только после перезагрузки сайта. Подскажите пожалуйста, в чем проблема? С BrowserRouter все работает как надо. Буду рад любой помощи.

import React from "react";
import { NavLink, Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

import './app.css';
import Playlists from "../common/components/playlists/Playlists";
import Acc from "../common/components/acc/Acc";

const history = createBrowserHistory();

export default function App() {
  return (
    <div className="app">
      <Router history={history}>
        <nav className='nav'>
          <NavLink exact className='nav__link' to='/'>All bets</NavLink>
          <NavLink className='nav__link' to='/acc'>Team stats</NavLink>
        </nav>
        <Switch>
          <Route exact path='/' component={Playlists} />
          <Route path='/acc' component={Acc} />
        </Switch>
      </Router>
    </div>
  );
}

2 ответа 2

1

Решено. Как оказалось все проблемы были из-за более новой версии history, откат на более старую решил проблему

1

Попробуйте написать так.

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

to

import { NavLink, BrowserRouter as Router, Switch, Route } from 'react-router-dom';

Параметр exact отключает частичное сопоставление для маршрута и гарантирует, что он возвращает маршрут, только если путь точно соответствует текущему URL-адресу.

import React from "react";
import { NavLink, BrowserRouter as Router, Switch, Route } from 'react-router-dom';

import './app.css';
import Playlists from "../common/components/playlists/Playlists";
import Acc from "../common/components/acc/Acc";

export default function App() {
  return (
    <div className="app">
      <Router>
        <nav className='nav'>
          <NavLink exact className='nav__link' to='/'>All bets</NavLink>
          <NavLink exact className='nav__link' to='/acc'>Team stats</NavLink>
        </nav>
        <Switch>
          <Route exact path='/' component={Playlists} />
          <Route exact path='/acc' component={Acc} />
        </Switch>
      </Router>
    </div>
  );
}

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.