在我做的最后一个项目中，我使用了Reach Router，我认为这是在React应用中拥有路由的最简单方法。
我认为它比React Router简单得多，React Router是我过去使用的另一种路由。
这里有一个5分钟的教程来了解它的基本情况。
安装
首先，用以下方法安装它
npm install @reach/router
如果你对
@语法感到陌生，这是npm的一个功能，允许一个范围内的包。换句话说，就是一个命名空间。
接下来，在你的项目中导入它。
import { Router } from '@reach/router'
基本用法
我在顶层的React文件中使用它，index.js 在create-react-app安装中，包裹所有我想出现的组件。
ReactDOM.render(
<Router>
<Form path="/" />
<PrivateArea path="/private-area" />
</Router>,
document.getElementById('root')
)
我添加到组件中的path 属性允许我为它们设置路径。
换句话说，当我在浏览器的URL栏中输入这个路径时，Reach Router就会向我显示这个特定的组件。
/ 路径是索引路线，当你没有在应用域旁边设置一个URL/路径时，就会显示出来。换句话说，就是 "主页"。
默认路径
当用户访问一个不符合任何路由的URL时，默认情况下Reach Router会重定向到/ 路由。你可以添加一个default 路由来处理这种情况，并显示一个漂亮的 "404 "消息来代替。
<Router>
<Form path="/" />
<PrivateArea path="/private-area" />
<NotFound default />
</Router>
以编程方式改变路由
使用navigate 函数以编程方式改变你的应用程序中的路由。
import { navigate } from '@reach/router'
navigate('/private-area')
链接到JSX中的路由
使用Link 组件，使用JJSX链接到你的路由。
import { Link } from '@reach/router'
<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>
URL参数
使用:param 语法添加参数。
<Router>
<User path="users/:userId" />
</Router>
现在在这个假想的用户组件中，我们可以把userId 作为一个道具。
const User = ({ userId }) => (
<p>User {userId}</p>
)
嵌套路由
我向你展示了如何在你的顶层React文件中以这种方式定义路由。
<Router>
<Form path="/" />
<PrivateArea path="/private-area" />
</Router>
你可以定义嵌套路由。
<Router>
<Form path="/" />
<PrivateArea path="/private-area">
<User path=":userId" />
</PrivateArea>
</Router>
所以现在你可以让你的/private-area/23232 链接指向User组件，通过userId 23232 。
你也可以选择让一个组件在其内部定义自己的路由。你在路由后面使用/* 通配符。
<Router>
<Form path="/" />
<PrivateArea path="/private-area/*" />
</Router>
然后在组件内部你可以再次导入Router，并定义它自己的一组子路由。
//component PrivateArea
<Router>
<User path="/:userId" />
</router>
任何使用/private-area/something 的路由将由用户组件处理，而路由之后的部分将作为其userId 的道具发送。
现在要在/private-area 路由中显示一些东西，你还需要在PrivateArea 组件中添加一个/ 处理程序。
//component PrivateArea
<Router>
<User path="/:userId" />
<PrivateAreaDashboard path="/" />
</router>
