React实现路由跳转 exact严格模式

1. 安装 react-router-dom npm install react-router-dom --save-dev

2. 报错： Can’t resolve 'react-router-dom’
   说明 项目中缺少 react-router-dom 模块
   命令 npm i react-router-native 安装这个模块
   成功后 文件 package.json 中 dependencies 就会有 “react-router-dom”: “^4.3.4” 字段

3. Error: Invariant failed: You should not use < Route > outside a < Router >
   翻译为: 不应在< router >外部使用< route >
   所以应该如图所示, 在外层包一个BrowserRouter 的盒子
   如图:
   讲解: Router 和 Route 的配合，就是之前我们介绍过的“提供者模式”，Router 是“提供者”，Route是“消费者”。
   比如 / 对应 Home 页，/about 对应 About 页，但是这样的设计需要服务器端渲染，因为用户可能直接访问任何一个 URL，服务器端必须能对 /的访问返回 HTML，也要对 /about的访问返回 HTML。
   在 react-router，有 BrowserRouter 支持这种URL
   因为 create-react-app 产生的应用默认不支持服务器端渲染，在实际产品中，其实最好还是用 BrowserRouter，这样用户体验更好。

4. 实现路由跳转
   
   

想实现以下功能, 默认进入就显示首页, 该怎么做呢?


如上图所示:

1. 我们先要引入 Redirect 在 ‘react-router-dom’ 中
2. <Redirect from="/*" to="/" /> 之后添加这行代码, 注意: 一定要写在Switch 里面, 写在 Route的最后面
   这时我们会发现, 路由跳转不了了
3. 然后在首页 默认跳转的地方加一个严格模式 exact
   exact是Route下的一个属性，react路由会匹配到所有能匹配到的路由组件，exact能够使得路由的匹配更严格一些。
   exact的值为bool型，为true时表示严格匹配，为false时为正常匹配。
   这样匹配到的, 就是相对应了的

项目链接地址: https://github.com/dddduang/react-ant-typeScript.git