什么是React Router
许多现代网站实际上是由一个页面组成的，它们看起来就像多个页面，因为它们包含呈现为单独页面的组件。 这些通常称为SPA-单页应用程序。 从根本上说，React Router的作用是根据URL中使用的路由（在首页中为/，在About页面中为/ about等），有条件地渲染某些组件以进行显示。
例如我们可以通过React Router将 www.myurl.com/ 与 www.myurl.com/about 或者 www.myurl.com/shop 链接起来。
那怎么做到这些呢？先看下React Router的基本组件：
React Router 组件
现在的React Router版本中已不需要路由配置，现在一切皆组件。
ReactRouter中提供了以下三大组件：
-
Router是所有路由组件共用的底层接口组件，它是路由规则制定的最外层的容器。 -
Route路由规则匹配，并显示当前的规则对应的组件。 -
Link路由跳转的组件
当然每个组件下又会有几种不同的子类组件实现。比如： Router组件就针对不同功能和平台对应用：
-
<BrowserRouter>浏览器的路由组件 -
<HashRouter>URL格式为Hash路由组件 -
<MemoryRouter>内存路由组件 -
<NativeRouter>Native的路由组件 -
<StaticRouter>地址不改变的静态路由组件
React Router 设计
- 安装包
npm install react-router-dom
- 创建router, 参考官方例子
在App.js 中放入以下代码
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
// This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
// Although the page does not ever refresh, notice how
// React Router keeps the URL up to date as you navigate
// through the site. This preserves the browser history,
// making sure things like the back button and bookmarks
// work properly.
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
<hr />
{/*
A <Switch> looks through all its children <Route>
elements and renders the first one whose path
matches the current URL. Use a <Switch> any time
you have multiple routes, but you want only one
of them to render at a time
*/}
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
);
}
// You can think of these components as "pages"
// in your app.
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
运行出来后的页面如下：
点击about 跳转到/about 页面，如下
React Router 主要组件
React Router中的组件主要分为三类：
- 路由器，例如<BrowserRouter>和<HashRouter>
- 路由匹配器，例如<Route>和<Switch>
- 导航，例如<Link>，<NavLink>和<Redirect>
将导航组件视为“路线更改器”，在Web应用程序中使用的所有组件都应从react-router-dom导入。
Routers
每个React Router应用程序的核心应该是路由器组件。 对于Web项目，react-router-dom提供<BrowserRouter>和<HashRouter>路由器。 两者之间的主要区别是它们存储URL和与Web服务器通信的方式。
- <BrowserRouter>使用常规URL路径。 这些通常是外观最好的URL，但是它们要求正确配置服务器。 具体来说，Web服务器需要在所有由React Router客户端管理的URL上提供相同的页面。 Create React App在开发中即开即用地支持此功能，并附带有关如何配置生产服务器的说明。
- <HashRouter>将当前位置存储在URL的哈希部分中，因此URL看起来类似于http://example.com/#/your/page。 由于哈希从不发送到服务器，因此这意味着不需要特殊的服务器配置。
要使用路由器，只需确保将其呈现在元素层次结构的根目录下即可。 通常，您会将顶级<App>元素包装在路由器中，如下所示：
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
function App() {
return <h1>Hello React Router</h1>;
}
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Route Matchers
有两个router matcher: Switch和Route。如果使用了 <Switch>，它将搜索其子<Route>元素，以查找其路径与当前URL匹配的元素。 当找到一个时，它将渲染该<Route>并忽略所有其他路由。 这意味着应将有比较具体path匹配规则的<Route>放置在比较模糊匹配规则的<Route>前面。
如果没有<Route>匹配，则<Switch>不渲染任何内容（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>
{/* If the current URL is /about, this route is rendered
while the rest are ignored */}
<Route path="/about">
<About />
</Route>
{/* Note how these two routes are ordered. The more specific
path="/contact/:id" comes before path="/contact" so that
route will render when viewing an individual contact */}
<Route path="/contact/:id">
<Contact />
</Route>
<Route path="/contact">
<AllContacts />
</Route>
{/* If none of the previous routes render anything,
this route acts as a fallback.
Important: A route with path="/" will *always* match
the URL because all URLs begin with a /. So that's
why we put this one last of all */}
<Route path="/">
<Home />
</Route>
</Switch>
</div>
);
}
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
需要注意的是<Route path>匹配URL的开头，而不是整个开头。 因此，<Route path =“ /”>将始终与URL匹配。 因此，我们通常将此<Route>放在<Switch>的最后。 另一种可能的解决方案是使用匹配整个URL的 <Route exact path="/">。注意：尽管React Router确实支持在<Switch>之外渲染<Route>元素，但从5.1版本开始，我们建议使用useRouteMatch hook代替。 此外，我们不建议呈现不带路径的<Route>，而是建议使用hook来访问所需的任何变量。
Navigation (or Route Changers)
React Router提供了一个<Link>组件来在应用程序中创建链接。 无论在何处render<Link>，都会在HTML文档中渲染anchor(<a>)
<NavLink>是<Link>的一种特殊类型，当其prop与当前位置匹配时，可以将其自身设置为“active”。
<Link to="/">Home</Link>
// <a href="/">Home</a>
<NavLink to="/react" activeClassName="hurray">
React
</NavLink>
// When the URL is /react, this renders:
// <a href="/react" className="hurray">React</a>
// When it's something else:
// <a href="/react">React</a>
<Redirect to="/login" />
任何时候要强制navigation，都可以使用<Redirect>。 声依永<Redirect>时，它将使用其 to prop进行导航。
