React-Router v5 не перенаправляет при доступе к указанному маршруту c с помощью history.push - PullRequest
Новая
       81

React-Router v5 не перенаправляет при доступе к указанному маршруту c с помощью history.push

0 голосов
/ 08 мая 2020

В моем приложении реакции у меня есть маршрут /lead-manager, маршрут /login и есть маршрут /, последний из которых является самим app.js, к которому я не хочу, чтобы кто-либо имел доступ, если кто-то просто перейдет к Маршрут / Я хотел, чтобы они перенаправили на маршрут /lead-manager. Вот что я сделал в соответствии с решением, приведенным здесь .

Моя часть app.jsx 

import {
  BrowserRouter as Switch,
  useHistory,
  Route,
  useLocation,
} from "react-router-dom";

const App = ({ confirmAuthentication }) => {
  let location = useLocation();
  let history = useHistory();

  useEffect(() => {
    async function fetchIt() {
      if (localStorage.jwt !== undefined) {
        confirmAuthentication();
      }
    }
    fetchIt();
    if (location.pathname === "/") {
      history.push("lead-manager");
    }
  }, []);
 return (
    <div>
      <Switch>
        <Route exact path="/testing">
          <TestingComponent />
        </Route>
        <PrivateRoute path="/lead-manager" component={LeadApp} />
        <Route exact path="/login">
          <LoginView />
        </Route>
      </Switch>
    </div>
  );
}

Когда я обращаюсь к /, я получаю результат /lead-manager в URL-адресе. Это желаемый вариант, но компонент не отображается в соответствии с компонентами, определенными в маршруте /lead-manager. Он просто остается на маршруте /, хотя URL-адрес показывает /lead-manager

Надеюсь, это ясно

1 Ответ

1 голос
/ 08 мая 2020

Для того, чтобы правильно использовать историю, вам необходимо иметь компонент приложения Router wrapping App вверху иерархии. Поскольку вы визуализируете маршрутизатор в компоненте приложения, он не может прослушивать изменения истории, поскольку история, предоставленная useHistory, не относится к истории, используемой маршрутизатором, если компонент приложения не упакован маршрутизатором.

Не отображать Router внутри компонента App

Также вы визуализировали Router как компонент Switch внутри компонента App, вместо этого вы должны импортировать точный компонент Switch из react-router-dom

Проверьте обновленный код ниже 

import {


    BrowserRouter as Router,
      Switch
      useHistory,
      Route,
      useLocation,
    } from "react-router-dom";

    const App = ({ confirmAuthentication }) => {
      let location = useLocation();
      let history = useHistory();

      useEffect(() => {
        async function fetchIt() {
          if (localStorage.jwt !== undefined) {
            confirmAuthentication();
          }
        }
        fetchIt();
        if (location.pathname === "/") {
          history.push("lead-manager");
        }
      }, []);
     return (
        <div>
          <Switch>
            <Route exact path="/testing">
              <TestingComponent />
            </Route>
            <PrivateRoute path="/lead-manager" component={LeadApp} />
            <Route exact path="/login">
              <LoginView />
            </Route>
          </Switch>
        </div>
      );
    }

    export default (props) => <Router><App {...props}/></Router>
...