使用反应路由器渲染页面

Question

我在使用React Router的应用程序中使用了类似于下面提到的代码的代码。

<Route path="/" handler={App}>
  <Route path="login" handler={LogIn}/>
</Route>

假设我在App文件中创建了一个标题字段，如“欢迎使用该页面”，它在运行时显示。但是如果我在登录页面中使用另一个标题，例如“欢迎登录页面”，则运行它时会显示

Welcome to the page
Welcome to log in

表示它将新标题附加到上一页的。但我想以不同的方式使用标题。那么，我该怎么做呢？

Answer 1

这是因为您的Login组件已安装在App组件中，因此App组件中的所有内容始终可见。把它想象成盒子里有盒子。解决方法是：

1. 如果您使用的是版本0.13.x：请使用DefaultRoute (check the example in the 0.13.x docs)
2. 如果您使用的是版本1.0.0-rc3：请使用IndexRoute

然后您只需将标题放入新组件中，当您点击/网址时，该组件就会被装入。

您的路线看起来像：

1. 版本0.13.x：

<Route name="app" path="/" handler={App}>
  <Route name="login" handler={Login}/>
  <DefaultRoute handler={Header}/>
</Route>

1. 版本1.0.0-rc3：

<Route path="/" component={App}>
  <IndexRoute component={Header} />
  <Route path="inbox" component={Login} />
</Route>

就像旁注一样，这可能是你的下一个问题：

React Router 1.0为处理身份验证提供了非常好的API，我想这是你要做的事情。如果是这种情况，请查看auth-flow example。还有onEnter。