React 路由—React Router

在 SPA 应用中，整个应用只有一个完整的页面，我们需要建立一种页面和路径的映射关系，切换路径时只进行局部刷新

React 中的路由 React Router 主要由以下几个包组成：

• react-router: 实现了路由的核心功能
• react-router-dom： 加入了浏览器运行环境下的一些功能
• react-router-native：加入了 react-native 运行环境下的一些功能
• react-router-config: 配置静态路由的工具库

react-router-dom

安装：

npm i react-router-dom

其中，react-router-dom的常用API：

• BrowserRouter、HashRouter
• Route
• Link、NavLink
• switch
• redirect

建立 Route.js 文件

• Switch 的含义类似 js 中的 Switch-Case，在这里只匹配第一个匹配到的内容
• exact 表示按照完整路径进行匹配

<Router>
    <Switch>
      <Route path={'/'} exact component={Index} />
      <Route path={'/index'} component={Index} />
    </Switch>
</Router>

在页面中引入 <Routes /> 即可。