开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

路由组件

React-Router 为我们提供了两个重要组件

Router 组件

它不做任何展示，仅提供路由模式配置，另外该组件会产生一个上下文，上下文中会提供给一些实用的方法和对象，供其他相关组件使用

1. HashRouter：该组件，使用 Hash 模式匹配
2. BrowserRouter：还组件，使用 BorwserHistory 模式匹配

通常情况下，Router组件只有一个，将该组件包裹整个页面

Route 组件

根据不同的页面地址展示不同的组件

• 两个重要属性

• 旧版本v6之前

1. path：匹配的路径 (默认情况下不区分大小写) 1. 可以设置Sensitive属性为true，来区分大小写 2. 默认情况下，只匹配初始目录，如果要精确匹配，配置 exact 属性为true 3. 如果不写path，则会匹配任意路径，也就是说，会在所有页面上显示
2. component：匹配成功后要显示的组件
3. children: 1. 传递React元素，无论是否匹配，一定会显示children，并且会忽略component属性 2. 传递一个函数，该函数有多个参数，这个参数来自于上下文，该函数返回react元素，则一定会显示返回的元素，并且并且会忽略component属性
4. Route组件可以写到任意地方，只要保证他是Router组件的后代元素就行
5. 可以进行嵌套路由，就是路由页面里面仍然可以使用新的路由

• 新版本V6及以上 具体的可以查阅官方文档

1. path：匹配的路径 (默认情况下不区分大小写) 1. 可以设置caseSensitive属性为true，来区分大小写 2. 当前版本已经不需要exact来进行精确匹配了，精确匹配的问题已经不存在了 3. 不写path则不会进行匹配，也就是说不会显示，而不是之前的全部显示
2. element：匹配成功后要显示的组件 element={}
3. children已经取消
4. Route组件可以写到任意地方，只要保证它是Routes组件的后代元素就行
5. 不可以进行嵌套路由，现在只能进行扁平化处理，强制拒绝嵌套路由