Блог

Я разрабатываю веб-приложение, и всякий раз, когда пользователь входит в систему или регистрируется, я хочу, чтобы приложение перенаправлялось на домашнюю страницу с новой навигационной панелью. Для этого после получения запроса от axios я использую метод React useHistory, чтобы заменить текущий компонент домашней страницей, как это

   axios.post('http://localhost:3020/login', {
        email: email,
        password: password
      })
      .then(function (response) {
        console.log(response.data);
       history.replace({
        pathname: '/',
        state: {  // location state
          login: true, 
        },
      });
      })
 

И в App.js Я получаю реквизит вот так

 function check(props){
  
console.log(props);


  if(isLoggedIn === true)
  return (

    <BrowserRouter>
    <Navbars />
    <Switch>
    <Route path="/" component={Dashboard} exact />
    <Route path="/math" component={Math} />
    <Route path="/reasoning" component={Reasoning} />
    <Route path="/computer" component={Computer} />
    <Route path="/english" component={English} />
    </Switch>
    </BrowserRouter>
     
  )
  else
  return(

    <BrowserRouter>
    <Navbars1 />
    <Switch>
    <Route path="/" component={Home} exact />
    <Route path="/login"  render={(props) => (
      <Login {...props} isAuthed={setLoginStatus} />
    )}/>
    <Route path="/signup" component={Signup} />
    </Switch>
    
    
     </BrowserRouter>
  )
}
 

Но реквизит не определен в консоли, когда я загружаю напрямую, и ничего не показывает при перенаправлении

В вашей текущей настройке вы не сможете этого сделать, так как

   <App>
    <BrowserRouter />
  </App>
 

Если вы измените маршрут, приложение не будет обновляться. Вместо,

   <BrowserRouter>
    <App>
  </BrowserRoute>
 

Сделайте перенаправление маршрута после входа в систему, и вам не нужны if инструкции внутри приложения, об этом позаботятся маршруты.

Есть много примеров, https://www.pluralsight.com/guides/how-to-set-react-router-default-route-redirect-to-home.