Question

使用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>

在该示例中，顶级组件的一部分与其余组件共享。

但是对于目标网页，可能没有父子关系让您将其纳入路由。

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

Answer 1

好的，我现在回答一下。

如果我理解正确的话，我认为你可以这样做的方式很简单我会做类似的事情：

<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>

然后只在this.props.children组件中包含App。

Answer 2

我无法获得上述任何答案，所以我决定按照我的方式去做。这是我做的：

<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>
    );
};

Answer 3

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>

React-Router：添加登录页面

3 个答案: