React路由5

React路由中的知识点:(路由5.xxx版本和路由6.xxx版本，本课版本为5版本)

1.React中的路由所需要的模块(组件),react-router-dom

2.下载安装该模块(注意此时一定要添加版本号,若不添加下载最新版本的)

指令:cnpm/npm i react-router-dom@5.2.1 --save (此种方式,在导入该路由时,会报路由路径问题,需要在d.ts文件中,进行模块声明 declare module "react-router-dom")

或者 使用 cnpm/npm i --save-dev @types/react-router-dom@5.3.3(不用声明)

3.路由种类:BrowserRouter(history 路由)组件或者HashRouter(hash 路由)组件,这是路由接口实现必须使用的组件,如果想使用路由中的功能,需要将该组件包裹起来才能实现效果;

4.Route 组件,路由展示组件,用来切换路由 - 负责路由切换组件;

    属性:

    path属性,是一个字符串,用来匹配路由(路由路径);

    component属性,当匹配到对应的路由时,会显示的组件渲染的内容;

    exact属性,指明该路由做排它处理;

5.Link 组件,路由切换组件;

    属性

    to属性(字符串),指明需要跳转的路径; /就是服务器根目录 localhost:3000

步骤：

1.下载模块如上方法1

2.在app.tsx中导入路由模块组件

3.在一级组件中

二级路由

重定向写Switch上面 只会默认一次

 

写在Switch中最后一行会一直默认