8

我想添加一个没有 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>
)

使用不包括应用程序的登录组件获取登录路径的最佳方法是什么？

4

2 回答 2

6

由于您使用的是 react-router v4，因此您需要将嵌套路由放在父组件中，而不是嵌套路由。有关解释，请参见此答案。

在您的情况下，最简单的方法是这样的。

<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'and'/'路线的。这将确保它仅根据给定顺序呈现给定路由中的第一个匹配路由。因此，当路径为 时，即使它也匹配（不完全匹配，您需要使用'exact' 属性进行精确匹配）'/login'，它也只会渲染页面。Login'/'

更新：

以上方法是 react-router 文档中推荐的方法。但是，如果您发现将所有路线保存在一个地方的价值，您仍然可以使用<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>
于 2017-04-18T00:59:36.060 回答
1

您可以使用具有非常基本的主布局的不同布局。

路由.js

export default () => (
    <Route path="/" component={Layout}>
        <Route component={WebLayout}>
            <IndexRoute component={Home} />
        </Route>
        <Route component={AppLayout}>
            <Route path="account" component={Account} />
        </Route>
        <Route component={SecurityLayout}>
            <Route path="login" component={Login} />
        </Route>
    </Route>
);

布局.js

const Layout = ({ children }) => (
    <div>
        {children}
    </div>
);

applayout.js

const AppLayout = ({ children }) => (
    ...
);

安全布局.js

const SecurityLayout = ({ children }) => (
    ...
);
于 2017-04-17T20:23:18.450 回答