React Router 哲学
在构建单页面应用时,我们需要用到路由,来决定不同的 URL 跳转到不同的页面,而 React 的思想是以组件化的形式来构建页面,所以 React Router 是根据不同的 URL 跳转到不同的组件。
对于绝大部分框架来说,路由都是静态的,react-router 在 pre-v4 之前也是静态的,但是之后改为动态路由
动态路由是应用程序渲染时发生的路由
基本组件
React Router 中有三种类型的组件
- router components
- route matching components
- navigation components
路由
React Router 中有三种类型的组件: router components, route matching components,和 navigation components。你在 Web 应用程序中使用的所有组件都应该从 react-router-dom 中导入。import { BrowserRouter, Route, Link } from “react-router-dom”;
路由
每个 React Router 应用程序的核心应该是一个 router 组件。对于 Web 项目,react-router-dom 提供了
Route 匹配
有两个路由匹配组件: <Route> 和 <Switch>
路由匹配是通过比较 <Route> 的 path 属性和 当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时,它将渲染其内容,当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹配。
你可以在任何你希望根据地址渲染内容的地方添加 <Route> 。列出多个可能的 <Route> 并排列出来往往很有意义。<Switch>用于将 <Route>分组
<Switch> 不是分组 <Route>所必须的,但他通常很有用。 一个 <Switch>会遍历其所有的子 <Route>元素,并仅渲染与当前地址匹配的第一个元素。这有助于多个路由的路径匹配相同的路径名,当动画在路由之间过渡,且没有路由与当前地址匹配(所以你可以渲染一个 “404” 组件)
路由渲染属性
你有三个属性 来给 <Route>渲染组件:component ,render ,children 。你可以查看 <Route> 文档 来了解它们的更多信息,但在这我们将重点关注 component 和 render 因为这几乎是你总会用到的两个
导航
React Router 提供了一个<Link> 组件来在你的应用程序中创建链接。无论你在何处渲染一个 <Link> ,都会在应用程序的 HTML 中渲染锚 (<a>)
<NavLink>是一种特殊类型的 <Link> 当它的 to 属性与当前地址匹配时,可以将其定义为“活跃的”
当你想强制导航时,你可以渲染一个 <Redirect>。当一个 <Redirect> 渲染时,它将使用它的 to 属性进行定向