Блог

Главная - Вопросы по программированию - Ссылка маршрутизатора React не обновляется автоматически

Ссылка маршрутизатора React не обновляется автоматически

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

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

Вопрос:

Когда я нажимаю на ссылку, URL-адрес меняется, но содержимое страницы не меняется, если я не обновлю свой браузер вручную. Почему это? Я использую React Router v5.

Вот мой код в App.js

 function App() {
  return (
    <Router>
      <div style={tempStyles}>
        <Switch>
          <Route exact component={Quiz} path="/quiz" />
          <Route exact component={Home} path="/" />
        </Switch>
      </div>
    </Router>
  );
}

И вот мой Home.js

 function Home() {
  return (
    <Router>
      <div>
        <Link to="/quiz">
          Take the quiz
        </Link>
      </div>
    </Router>
  );
}

Комментарии:

1. Обычно это происходит, когда у вас есть вложенные маршруты и вы передаете exact prop внутри компонента Route. Можете ли вы поделиться своим кодом?

Ответ №1:

У меня была такая же проблема, и оказалось, что должен быть только один компонент. В вашем случае попробуйте удалить компонент из Home.js .

 function Home() {
   return (
      <div>
         <Link to="/quiz">
          Take the quiz
         </Link>
      </div> 
   );
}

Ответ №2:

Где бы вы ни определили свои маршруты exact={true} , это решит вашу проблему. Основная проблема заключается в том, что мы часто не используем exact={true} при определении маршрутов, и, как следствие, фактический компонент не отображается до обновления.

Например, предположим, что я определил для '/path' рендеринга TempComponent и для 'path/actual' рендеринга ActualComponent . Итак, что произойдет, если я не установлю exact={true} для '/path' и '/path/actual' , react-router будет отображаться TempComponent для '/path/actual' , потому что он соответствует URL '/path' -адресу, хотя и частично, если мы установим exact={true} then for '/path/actual' , он не будет отображаться TempComponent , вместо этого он будет отображаться ActualComponent