首页 > 代码库 > react-router

react-router

2024-11-24 06:55:38   203人阅读

路由配置

我们来通过一个简单的例子解释一下如何编写路由配置。

React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

通过上面的配置，这个应用知道如何渲染下面四个 URL：

技术分享

 

 

添加首页IndexRoute 

想象一下当 URL 为 / 时，我们想渲染一个在 App 中的组件。不过在此时，App 的 render 中的this.props.children 还是 undefined。这种情况我们可以使用 IndexRoute 来设置一个默认页面

<IndexRoute component={Dashboard} />

 

绝对路径 让 UI 从 URL 中解耦出来

React.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="inbox" component={Inbox}>
        {/* 使用 /messages/:id 替换 messages/:id */}
        <Route path="/messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

我们现在的 URL 对应关系如下

技术分享

提醒：绝对路径可能在动态路由中无法使用

 

Redirect 重定向

{/* 跳转 /inbox/messages/:id 到 /messages/:id */}
<Redirect from="messages/:id" to="/messages/:id" />

 

react-router


联系
我们