Я использую react-router-dom в своем приложении reactjs, и у меня есть этот блок в конце моих маршрутов, чтобы перенаправить все неправильные пути на этот:

<Route path="*">
    <Redirect to="/dashboard" />
</Route>

Но всякий раз, когда я перезагружаю любую страницу на своем веб-сайте, меня перенаправляют на панель инструментов. Это неправильное поведение. Как я могу это исправить?

1
YaraR 21 Янв 2022 в 19:01
Предоставьте более полный и исчерпывающий пример кода, чтобы мы могли увидеть, как этот маршрут связан с маршрутами, которые вы визуализируете. Мы должны увидеть, почему этот маршрут сопоставляется и отображается безоговорочно. Я подозреваю, что вам не хватает компонента Switch. stackoverflow.com/help/minimal-reproducible-example
 – 
Drew Reese
21 Янв 2022 в 20:44

3 ответа

Вы можете использовать Navigate из последней версии react-router-dom для перенаправления на другую страницу.

import React, { Component } from 'react';
import Test_1 from './components/Test_1';
import Test_2 from './components/Test_2';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Navigate } from 'react-router-dom';
class App extends Component {
  render() {
    return (
      <Router>
        <Routes>
          <Route path='/' element={<Test_1 />} />
          <Route path='/home' element={<Test_2 />} />
          <Route path='*' element={<Navigate to='/' />} />
        </Routes>
      </Router>
    );
  }
}

export default App;
0
Dharman 21 Янв 2022 в 19:48

Судя по вашему описанию, вы визуализируете несколько маршрутов в маршрутизатор без компонента Switch. Маршрутизаторы включительно сопоставляют и отображают маршруты, а Switch исключительно сопоставляют и отображают первые Route или Redirect компонент. Другими словами, маршрутизатор будет отображать все совпадения, включая перенаправления, Switch отображает только первое.

Оберните свои маршруты в Switch и поместите redirect последним в списке, чтобы, если ранее не было сопоставлено ни одного другого пути маршрута, Redirect будет отображаться.

<Switch>
  ... all other routes ...
  <Redirect to="/dashboard" />
</Switch>

Все это OFC предполагает, что вы все еще используете react-router-dom v5, поскольку вы не упомянули о каких-либо Redirect ошибках импорта компонентов (Redirect было удалено в RRDv6). Если это не так и вы на самом деле используете RRDv6, обновите свой вопрос, включив в него более полный пример кода.

0
Drew Reese 21 Янв 2022 в 20:49

Попробуйте написать так, если вы используете версию 6 react-router-dom

<Routes>
      <Route path="/" element={<Homepage />} />
      <Route path="*" element={<ErrorPage />} />
</Routes>
0
Mriganka Saha 21 Янв 2022 в 19:09
Здравствуйте, спасибо за ответ. попробуем и сообщим
 – 
YaraR
21 Янв 2022 в 19:20