Question

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

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

如果我这样做：

void WriteNos(), ConvertDecInt2Binary(), ConvertDecimal2Binary(), ReadNos(), 
ConvertBinary2DecInt(), ConvertDecFloat2Binary();

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

void

使用“登录”组件获取登录路径的最佳方式是什么？该组件不包含该应用程序？

Answer 1

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

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

'/login'

请注意我如何使用<Switch>来包装'/'和'/login'路由。这将确保它仅根据给定的顺序从给定路线渲染第一个匹配路线。因此，当路径为Login时，它只会呈现'/'页面，即使它也匹配（不完全匹配，您需要使用'exact' attribute进行完全匹配）{{1} } route。

<强>更新

以上方法是反应路由器文档中的推荐方法。但是，如果您看到将所有路线保存在一个地方的价值，您仍然可以将<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>

Answer 2

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

routes.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>
);

layout.js

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

applayout.js

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

securitylayout.js

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

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

2 个答案: