Передача состояния в Redirect

Question

Я пытаюсь сделать так, чтобы при входе вы заходили на домашнюю страницу. Но когда вы вводите URL, который не существует, он попросит вас войти в систему, а затем переместится на страницу 404. Я использую React Router v4.

I 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
}