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” 字段React实现路由跳转 exact严格模式_第1张图片

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

  4. 实现路由跳转
    React实现路由跳转 exact严格模式_第3张图片
    React实现路由跳转 exact严格模式_第4张图片

React实现路由跳转 exact严格模式_第5张图片

React实现路由跳转 exact严格模式_第6张图片
在这里插入图片描述

想实现以下功能, 默认进入就显示首页, 该怎么做呢?
React实现路由跳转 exact严格模式_第7张图片
React实现路由跳转 exact严格模式_第8张图片
如上图所示:

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

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

你可能感兴趣的:(react)