React 路由器在模式登录/注册期间保留转换信息

Question

我找到了一堆 React Router 'auth' 示例，所有这些示例都使用 replaceState 转到登录路由，然后在登录后转到固定位置。我正在寻找的是一个示例，其中登录和注册是模式的(不直接绑定到它们自己的路由(，这些路由是基于状态的，可以随时通过应用程序从任何地方触发。

我想做的是，如果用户通过 GUI 调用操作或直接转到"需要身份验证"且未登录的 URL/路由，请显示模态，然后在登录和/或注册/登录后发送到他们试图到达的路由。否则，将他们发送到他们来自的路线或主页(如果不是之前的路线((即他们直接在浏览器中输入了URL(。

我能够找到的东西假设登录是它自己的路线，然后重定向到某个罐头位置(不是用户首先尝试去的地方(。请记住，用户可以在注册和登录模式之间切换任意次数，因此我需要坚持他们想去的地方，直到他们取消或成功。如果取消，很容易，但在成功后，我可以在哪里以及如何坚持，然后过渡到请求的路线？

蒂亚

Answer 1

我能想到两种可能的方法：

1. 所有<Route/>特定的pageCompoenent都扩展了一个AuthComponent，默认情况下，该处理登录或注册模式的显示。
2. 所有<Route/>特定pageCompoenent都是父<Route/>组件AuthHandler的子级，该组件通过{this.props.children}呈现所有子路由。

我个人更喜欢第二种解决方案。示例代码：

    // Soln2
    // Route Declaration
    <Route name='auth' path='/' component={AuthHandler}>
      <Route name='settings' path='/settings' component={SettingsPage} />
      <Route name='about' path='/about' component={AboutPage} />
      <Route name='someother' path='/someother' component={SomeOtherPage} />
    </Route>
    // AuthHandler
    class AuthHandler extends React.Component{
      componentWillMount(){
        if(!Authenticated) showLoginRegisterModal();
      }
      componentWillReceiveProps(){
        if(!Authenticated) showLoginRegisterModal();
      }
      showLoginRegisterModal(){
        // Handle how you wish to show your modal, by style/class/this.state.ifShow
      }
      render(){
        return(
          <div>
            <ModalComponent ifShow={this.state.ifShow}/>
            <div {...this.props}>
              {this.props.children} // Your child pages will get rendered here
            </div>
          </div>
        )
      }
    }
    class ModalComponent extends React.Component{
      // Some member functions
      render(){
        return(
          <div>
            <LoginComponent ifShow={this.state.ifLoginShow}/>
            <RegisterComponent ifShow={this.state.ifRegisterShow}/>
          </div>
        )
      }
    }

Answer 2

好的，这有效...

export default {
  path: '/',
  component: App,
  indexRoute: { component: Child },
  childRoutes: [ //<- ***REGULAR ROUTES ARE CHILDREN HERE***
    { path: 'test1', component: Child1 },
    { path: 'test2', component: Child2 },
    { component: AuthHandler,  
      childRoutes: [  //<- ***AUTH ROUTES ARE CHILDREN HERE***
        {path: 'test3', component: Child3},
        {path: 'test4', component: Child4}
      ]
    }
  ]
};

。转到/test1 或/test2 是不安全的路由(任何测试的直接子项以及/本身也是如此(。但是，AuthHandler 子级下的任何子项(除非您真的想要路径，否则它没有或不需要路径(将首先通过 AuthHandler - 您可以在其中执行任何您想要的操作。所以/test3 和/test4 是安全的路由(假设你以你喜欢的方式在 AuthHandler 中处理身份验证(。这也适用于 JSX 语法路由，前提是它们的嵌套相同。