1. 主要组件简介
- 路由器 router,like < BrowserRouter>和< HashRouter>
- 路径匹配器 route matchers,like < Route> and < Switch>
- 导航 navigation,like < Link>, < NavLink>, and < Redirect>
1.1 路由器 Router
- < BrowserRouter>
- < HashRouter>
对于每一个Web项目,react-router-dom提供了 < BrowserRouter> 和 < HashRouter> 两种router。他们主要的区别是他们存储URL的方式和与Web服务器交流的方式有所不同。
- < BrowserRouter>使用常规的URL路径。是外观最好的URL,但是它们要求正确配置服务器。具体来说,您的Web服务器需要在所有由React Router客户端管理的URL上提供相同的页面。Create React App在开发中即开即用地支持此功能,并附带有关如何配置生产服务器的说明。
- < HashRouter>将当前位置存储在URL 的hash一部分中,因此URL看起来像http://example.com/#/your/page。由于哈希从不发送到服务器,因此这意味着不需要特殊的服务器配置。
使用Router,要确保它被渲染在你要渲染的元素等级的根上。通常,你要把它包裹在你的顶级元素< App />上。
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
1.2 路径匹配器 Route
- < Switch>
- < Route>
和路径匹配相关的组件有两个:Switch和Route。当< Switch>被渲染,它会搜索它的子< Route>,找到第一个path与当前URL匹配的Route。当找到时,它将渲染这个Route并忽略其他Route。这意味着您需要手动调整Route们在代码中的位置,以确保在无优先级的情况下,哪一个Route应该被渲染。
如果Switch没有找到Route可以匹配,它将渲染出null对象。
例子
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
function App() {
return (
<div>
<Switch>
{/* 若当前路径是 /about, 这个route将被渲染
剩下的会被忽略 */}
<Route path="/about">
<About />
</Route>
{/* 注意接下来的两条Route的顺序. 这条更加特别的
path="/contact/:id"放在了path="/contact"的前面 */}
<Route path="/contact/:id">
<Contact />
</Route>
<Route path="/contact">
<AllContacts />
</Route>
{/* 如果先前的Route都没有匹配上,那么会渲染下面的Route,
因为"/"可以匹配任何路由 */}
<Route path="/">
<Home />
</Route>
</Switch>
</div>
);
}
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
1.2.1 注意事项
- 一个非常重要的事是,Route的path属性并不是全局匹配,而是从字符串的开始匹配,比如path="/“永远可以匹配到任何路径,因此,我们通常将< Route path=”/" />放到Switch的最后。一种解决方案是使用< Route exact path="/">
- 虽然Router不支持渲染Switch外的Route,但在5.1版本,我们推荐你使用the useRouteMatch hook替代。另外我们不建议你渲染没有path属性的Route,作为替代,建议你使用a hook去访问任何你想要的变量。
1.3 导航 Navigation (or Route Changers)
- < Link />
- < NavLink />
- < Redirect />
React Router提供< Link>组件,它永远会被渲染成一个a标签。
< NavLink />是一个特殊的Link类型,当to属性与当前路径匹配,它可以改变自己的激活样式。
<NavLink to="/react" activeClassName="hurray">
React
</NavLink>
任何时候,只要你想暴力跳转,你可以使用< Redirect />。