Блог

Главная - Вопросы по программированию - Компонент React ничего не отображает, кроме как после обновления страницы

Компонент React ничего не отображает, кроме как после обновления страницы

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

Вопрос:

Я использую маршрутизатор react, но когда я меняю страницу, мой компонент ничего не отображает, просто показывает белую страницу, но она отображается при обновлении страницы

Это мой список маршрутов: routes.tsx

И это мое приложение.tsx : Приложение.tsx

index.tsx: индекс.tsx

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

1. Добавьте свой код в песочницу

2. Можете ли вы объяснить, что вы видели до и после обновления страницы ? Вы проверяли журналы консоли в инструментах разработки ?

3. Не публикуйте изображения кода. Опубликуйте сам код.

Ответ №1:

<Route> Должны быть покрыты <Switch></Switch> тегами и <BrowserRouter></BrowserRouter> тегами, импортированными из import { Switch, Route, BrowserRouter } from "react-router-dom"; этого:

 import { Switch, Route, BrowserRouter } from "react-router-dom";
import Home from "./Pages/Home";


const App = () => {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Route path="/Home">
            <Home />
          </Route>
        </Switch>
      </BrowserRouter>
    </>
  );
};

export default App;

Вы можете добавить компонент навигации и настроить Ссылки для маршрутизации к другим компонентам:

 import React from "react";
import { Link } from "react-router-dom";

const Nav = () => {
  return (
      <Link to="Home" >
        Home
      </Link>
  );
};

export default Nav;

Пожалуйста, поместите свой код в песочницу, чтобы люди могли понять его более четко

Ответ №2:

Вместо того, чтобы иметь пустой контейнер <> <></> используйте переключатель для переноса ваших маршрутов

 <Switch> 
...routes

</Switch>

затем вы можете просто импортировать его таким, каким вы были, без включения переключателя в качестве:

 <Suspense>
  <Routes />
</Suspense>

Ответ №3:

Вам не хватает обертывания вашего коммутатора и маршрутов <BrowserRouter> . Вы можете использовать BrowserRouter as Router

Проверьте основной пример.

https://reactrouter.com/web/example/basic

Ответ №4:

Вам нужно импортировать BrowserRouter , а Router не из react-router-dom

пробовать

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

вместо

 import { Router, Switch } from 'react-router-dom';
Метки: ,