React-Router：在登陆页面添加

React-Router有一个嵌套的概念，使我很难想象应该在哪里注入着陆页。React-Router：在登陆页面添加

例如：

<Route path="/" component={App}> 
     <Route path="login" component={Login} /> 
     <Route path="logout" component={Logout} /> 
     <Route path="about" component={About} /> 
     <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
</Route>

在顶层组件的该实施例一部分与部件的其余部分共享。

但是对于登录页面，可能没有适合您的路线的父子关系。

Ergo，在使用react-router时如何管理登录页面？

来源

2015-10-20 Nick Pineda

你可以使用'IndexRoute'来解决 – knowbody

@knowbody但不IndexRoute有它背后的同一嵌套概念？着陆页在应用程序的其余部分之外拥有自己的结构。 –

好吧，让我在这里回答。

如果我正确地理解了你，你可以做到的方式非常简单直接。
我会做这样的事情：

<Route path='/' component={LandingPage}> 
    <Route path='app' component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
</Route>

，然后只在您的App组件this.props.children。

来源

2015-10-20 14:35:47 knowbody

但在整个项目中不会登陆页面代码呢？就像在每一层一些代码保持不变，这个“this.props.children”是根据当前路线填充的？ –

我不认为我理解你的问题......登陆页面代码是什么？ – knowbody

它是一个独立的组件，它不会共享与代码其余部分相同的结构。例如，我的应用程序的其余部分都有一个标题，但着陆页却没有。 –

React-Router中的IndexRoute允许您在到达应用程序的一部分时定义默认组件。因此，使用以下代码，如果转到“/”，页面将呈现App组件，并将LandingPage组件注入其props.children。

<Route path="/" component={App}> 
    <IndexRoute component={LandingPage} /> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
</Route>

来源

2016-04-25 15:15:52

我无法得到任何上述的答案工作，所以我决定只是做我的方式。这是我做的：

<Route path="/"> 
    <IndexRoute component={Landing}/> 
    <Route path="/" component={App}> 
    <Route path="login" component={LoginOrRegister} onEnter={redirectAuth}/> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth}/> 
    <Route path="vote" component={Vote} onEnter={requireAuth}/> 
    <Route path="about" component={About}/> 
    </Route> 
</Route>

主要组件包含着陆页和应用程序本身都需要的最小值。在我的情况下，他们什么也没有分享，所以这个组件只是一个包装div。

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

来源

2016-07-04 21:07:32 josullivan

React-Router：在登陆页面添加

回答

相关问题