react中的路由使用

react

前言

使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在最新React中，使用的是react-router-dom。本文主要针对react-router-dom进行说明。

安装

首先进入项目目录，打开终端，使用npm安装react-router-dom：

npm install react-router-dom --save-dev
操作配置

打开项目目录中的src文件夹，编辑器打开index.js文件，引入{BrowserRouter as Router}，用Router标签包裹App标签：

在src文件夹下建立components文件夹，在components文件夹里建两个组件，然后在app.js中引入

如上代码定义了一个纯路由组件，将两个页面组件One和Two使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面.
完善代码

现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了组件用来避免这种状况发生。当你点击时，url会更新，组件会被重新渲染，但是页面不会重新加载。

NavLink是Link的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数

.重定向（Redirect）：当客户端（浏览器）向服务器发送一个URL请求后，但是资源并不在当前请求的服务器上，此时服务器会告诉浏览器，资源在另外一个URL地址上，此时浏览器会重新发送请求到新的资源地址。
子路由

在components文件夹创建多个路由组件，然后引入需要子路由的组件里。