Question

基于any，我需要路由到其他组件。

我正在获取登录页面，但无法呈现主页。

isLoggedIn

Answer 1

您可以通过渲染<Redirect>进行重定向，以导航到新位置。新位置将覆盖历史记录堆栈中的当前位置，就像服务器端重定向（HTTP 3xx）一样。

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

通过重定向传递道具

<Redirect to={{
    pathname: '/dashboard',
    state: { id: '123' }
}} />

然后您可以通过this.props.location.state.id

访问prop

Answer 2

使用Redirect

从父组件中，将this.state.isLoggedIn作为道具传递给LoginPage和HomePage组件。

在LoginPage组件中

render(){
  if(this.props.isLoggedIn){
   return <Redirect to='/home' />
  }

  return ( your login page )
}

使用重定向路径'/'代替您在HomePage组件中执行相同的操作。

Answer 3

您可以使用this.props.history.push(myRoutes)并在参数中发送路由。它会将您重定向到所需的路线。

我如何通过React Router V4重定向

3 个答案: