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

反应路由器不知道哪个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
}

重定向中的通过状态

1 个答案: