在重定向中传递状态

Question

我正在尝试做到这一点，以便在您登录时转到主页。但是当你输入一个不存在的 URL 时，它会要求你登录，然后将你带到一个 404 页面。我正在使用 React Router v4.

我console.log(this.props.location.state)看结果。

// App.js
<BrowserRouter>
  <Menu />
  <MainTitle />
  <Switch>
    <Route path='/' exact component={Home} />
    <Route path='/login' component={Login} />
    <Route path='/error' component={Error} />
    <Route path='/leaderboard' component={LeaderBoard} />
    <Route path='/add' component={Add} />
    <Route path='/questions/:question_id' exact component={Info} />
    <Redirect from='*' to={{
      pathname: '/login',
      state: {
        fromError: true
      }
    }}/>
  </Switch>
</BrowserRouter>

// Login.js
const { fromError } = this.props.location.state
if(fromError){
  ...
} else {
  ...
}

地址主体部分 URL 中的错误工作正常。例如： http://localhost:3000/leaderboooooard -> fromError = true http://localhost:3000/questionnnns/xj352vofupe1dqz9emx13r -> fromError = true

但是在 http://localhost:3000/questions/:question_id 的路由上，当参数不正确时，它会重定向到登录，但不会将 fromEror 设置为 true。有任何想法吗？感谢您的帮助。

Answer 1

React 路由器不知道哪个 url 参数是正确的，哪个是错误的。它只是匹配路径并将参数作为道具提供给呈现的组件。

由于您可以确定参数是否有效，因此您可以重定向到从组件本身登录

// In Info component render method

render() {
    if(!this.isValid(this.props.match.param. question_id)) {
        <Redirect  to={{
          pathname: '/login',
          state: {
            fromError: true
          }
        }}/>
    }
    // rest render logic
}

在重定向中传递状态

Passing state in Redirect

reactjs

redux

react-router-v4