Используя React Router, как мне перенаправить на маршрут, если в URL есть параметр? - PullRequest
Новая
       20

Используя React Router, как мне перенаправить на маршрут, если в URL есть параметр?

0 голосов
/ 01 декабря 2019

У меня есть приложение React, использующее react-router-dom, и я хотел бы создать <Redirect /> в моем компоненте приложения верхнего уровня, если выполняется условие. 

import { BrowserRouter, Redirect, Route } from 'react-router-dom';

function App() {

  const [user, setUser] = useState(null);

  function noUserRedirect() {
    // redirect to Home if user is empty
    if(!user) {
      return (
        <Redirect to="/" />
      );
    }
  }

  return (
    <BrowserRouter>
      {noUserRedirect()}
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/dashboard/:id">
        <Dashboard />
      </Route>
    </BrowserRouter>
  );
}

export default App;

Я знаю, что userне установлен. Когда я захожу на /dashboard, перенаправление работает, и меня переводят в компонент <Home />, но когда я, например, посещаю /dashboard/123, запускается функция перенаправления, но меня все равно переносят в компонент <Dashboard />.

Как я могу предотвратить это?

1 Ответ

0 голосов
/ 01 декабря 2019

Это всегда работало. Причина, по которой я не думал, что это сработало, заключалась в том, что я получал ошибку в своем <Dashboard /> компоненте.

Я ссылался на user, когда он не существовал, но я был сбит с толку, потому что Я предполагал, что <Redirect /> произойдет до того, как достигнет <Dashboard />. Это не так.

Я исправил свою ошибку в <Dashboard />, поместив ее в верхнюю часть функции Dashboard: 

// prevent rendering if user does not exist
if(!props.user) {
  return false;
}

Однажды компонент Dashboard возвратил false, перенаправление прошло успешно.

Я предполагаю, что компоненты визуализируются до того, как маршрутизатор выполнит перенаправление. Это не супер интуитивно понятно, но теперь, когда я это знаю, все это имеет смысл.

...