如何限制对路由的访问

Question

我的 App.js 中有

render() {
    return (
        <Router history={customHistory}>
            <div>
                    <Header/>
                    <Switch>
                    <Route exact path="/" component={HomePage}/>
                    <Route exact path="/test" component={ThankYou} />
                    <Route path="*" component={NotFound} status={404}/>
                    </Switch>
                    <Footer/>                        
            </div>
        </Router>
    );
}

这个溃败，我有联系表格added code to codpen for convenience

如何确保组件在路由上

<Route exact path = "/test" component = {Test} />

只能在成功提交表单后进行，如果您尝试在其他时间进行，则重定向到 404

Answer 1

一种通用的方法是创建PrivateRoute。

根据状态-formSubmitted，我们可以重定向到notFound或者404路由。

class ProtectedRoute extends Component {
  render() {
    const { component: Component, ...props } = this.props

    return (
      <Route 
        {...props} 
        render={props => (
          this.state.formSubmitted ?
            <Component {...props} /> :
            <Redirect to='/notFound' />
        )}
      />
    )
  }
}

class AllRoutes extends Component {
  render() {
    return (
      <Switch>
        <Route path='/login' component={Login} />
        <ProtectedRoute path='/test' component={ThankYou} />
        <Route path="*" component={NotFound} />
      </Switch>
    )
  }
}