在React中使用HashRouter單獨登錄頁面

我想添加一個沒有App作爲父級的登錄頁面。這是我目前HashRouter設置：在React中使用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> 
)

什麼是得到一個登錄部件登錄路徑的最好方式，不包括應用程序？

來源

2017-03-29 Wylliam Judd

爲什麼不給「App」添加子路徑？例如'/ session'。您也可以在每個組件中使用「App」，而不是將其用作父級。沒有「最佳途徑」。有許多解決方案。 – Sulthan

我不想在每個頁面的url中使用'/ session'，這在美學上是不合適的。 –

由於您使用的是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'時，它將只呈現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>

來源

2017-04-18 00:59:36

我知道「確切路徑」，但不知道「」。謝謝你的回答。我認爲有一個大型路由器的所有路由都有好處 - 它可以告訴你所有的路由是什麼。如果我想在我的''內嵌入其他路徑，我該怎麼做？ –

查看更新的答案 –

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

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 }) => (
    ... 
);

來源

2017-04-17 20:23:18

在React中使用HashRouter單獨登錄頁面

回答

相關問題