React router NavLink не меняется на новый компонент

#reactjs #routes #react-router #react-router-dom

#reactjs #маршруты #react-маршрутизатор #react-router-dom

Вопрос:

Я пытаюсь перенаправить на новую страницу в своем приложении react с помощью react router. В настоящее время, когда я нажимаю на навигационную ссылку проектов, URL-адрес меняется с localhost:3000 на localhost:3000/projects на, однако страница не меняется. Я должен нажать enter в строке поиска, чтобы перейти на новую страницу после нажатия на ссылку.

мой app.js выглядит примерно так

 class App extends Component {
  
  render() {
    return (
      <div className="App">
        <NavBar />
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/projects" component={Projects} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

и ссылка в моем NavBar.js выглядит вот так..

 import { NavLink, BrowserRouter } from 'react-router-dom'//what I am importing
import { Link } from 'react-scroll'; 

 <BrowserRouter>
   <NavLink to="/projects">Projects</NavLink>
 </BrowserRouter>

Есть причина, по которой это не сработает?

Ответ №1:

Вам не нужно переносить navbar.js в браузере маршрутизатора. Вместо этого переместите свой компонент navbar в маршрутизаторе браузера в app.js . Убедитесь, что компонент находится внутри маршрутизатора браузера, но за пределами коммутатора. Это должно сработать

Ответ №2:

В вашем NavBar.js , попробуйте <NavLink to="/projects">Projects</NavLink> вместо просто проектов.

Ответ №3:

Я думаю, вы забыли ‘/’ <NavLink to="projects">Projects</NavLink> перед тем, как перейти к свойству. попробуйте это: <NavLink to="/projects">Projects</NavLink> и просто оберните свой самый внешний компонент с <BrowserRouter></BrowserRouter> помощью like app.js или index.js .

Ответ №4:

Отключение <React.StrictMode> в App.js позволяет переключаться между компонентами.