reactjs – 在React中使用HashRouter分离登录页面

发布时间：2020-12-15 05:04:14 所属栏目：百科来源：网络整理

导读：我想添加一个没有App作为父级的登录页面.这是我目前的HashRouter设置： Provider store={ store } HashRouter App Route path='/path1' component={ Component1 } / Route path='/path2' component={ Component2 } / Route path='/path3' component={ Compon

我想添加一个没有App作为父级的登录页面.这是我目前的HashRouter设置：

<Provider store={ store }>
    <HashRouter>
      <App>
        <Route path='/path1' component={ Component1 } />
        <Route path='/path2' component={ Component2 } />
        <Route path='/path3' component={ Component3 } />
      </App>
    </HashRouter>
  </Provider>

如果我这样做：

<Provider store={ store }>
    <HashRouter>
      <div>
        <Route path='/login' component={ Login } />
        <App>
          <Route path='/path1' component={ Component1 } />
          <Route path='/path2' component={ Component2 } />
          <Route path='/path3' component={ Component3 } />
        </App>
      </div>
    </HashRouter>
  </Provider>

然后我在应用程序上方获得登录页面.这是我的应用程序组件：

const App = ({ children }) => (
  <div>
    <Navbar/>
    <div className='col-md-10 col-md-offset-1'>
      { children }
    </div>
  </div>
)

使用Login组件获取登录路径的最佳方法是什么,不包括App？

由于您使用的是react-router v4,因此需要将嵌套路由放在父组件中,而不是嵌套路由.有关说明,请参阅 this answer.

在您的情况下,最简单的方法是这样的.

<Provider store={ store }>
  <HashRouter>
    <div>
      <Switch>
        <Route path='/login' component={ Login } />
        <Route path='/' component={ App } />
      </Switch>
    </div>
  </HashRouter>
</Provider>

const App = () => (
  <div>
    <Navbar/>
    <div className='col-md-10 col-md-offset-1'>
      <Route path='/path1' component={ Component1 } />
      <Route path='/path2' component={ Component2 } />
      <Route path='/path3' component={ Component3 } />
    </div>
  </div>
)

请注意我是如何使用<Switch>来包装’/ login’和’/’路由的.这将确保它仅根据给定的顺序从给定路线呈现第一个匹配路线.所以当路径是’/ login’时,它只会渲染登录页面,即使它也匹配(不完全匹配,你需要使用‘exact’ attribute进行精确匹配)’/’路由.

更新：

以上方法是反应路由器文档中的推荐方法.但是,如果您看到将所有路线保存在一个位置的值,您仍然可以使用< Switch>用你已经拥有的东西.

<Provider store={ store }>
  <HashRouter>
    <div>
      <Switch>
        <Route path='/login' component={ Login } />
        <App>
          <Route path='/path1' component={ Component1 } />
          <Route path='/path2' component={ Component2 } />
          <Route path='/path3' component={ Component3 } />
        </App>
      </Switch>
    </div>
  </HashRouter>
</Provider>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!