React Router以及版本6与版本5的区别

react代码插件片段：ES7+React/Redux/React-Native snippets

路由规则及新旧对比：

1. <HashRouter>与<BrowserRouter>
   1. 两者作用一样，需要用于包裹整个应用
   2. HashRouter修改的是地址栏的hash的值
2. <Routes/>与<Route/>
   1. V6版本中移出了先前的<Switch>,引入了<Routes>来代替它
   2. <Routes>和<Route>需要配合使用，且必须要用<Routes>包裹<Route>
   3. <Route>相当于一个if语句，如果其路径与当前URL匹配，则呈现其对应的组件
   4. <Route caseSensitive>属性用于指定：匹配时是否区分大小写（默认为false）
   5. 当url发生变化时，<Routes>会匹配里面的所有route，匹配后不再向后查找
   6. <Route>可以嵌套，并且配合useRoutes()配置“路由表”，但需要<Outlet>组件渲染子路由。

   7. <Routers>
        {/*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/}
        <Route path="/login" element={<Login/>}></Route>
        <Route path="/home" element={<Home/>}>
          {/*子路由若写/，需要带上父路由*/}
          <Route path="/home/message" element={<Message/>}>
            {/*带参数*/}
            <Route path="/home/message/detail/:id" element={<Detail/>}></Route>
          </Route>
          {/*或者不写/ */}
          <Route path="news element={<News/>}></Route>
        </Route>
        {/*代替重定向，使用*可使得所有找不到路有的路径都重定向到“/home” */}
        <Route path="*" element = {<Navigate to="/home"/>}></Route>
      </Routers>

3. <NavLink>
   1. 作用：与<Link>组件类似，并且可以实现导航的“高亮”效果
   2. v5版本和V6版本的区别是如图所示：
   3. 默认情况下，当父组件homeNav的子组件匹配成功，父组件的导航也会高亮，当Navlink上添加了end属性后，若父组件的子组件匹配成功，则父组件的导航没有高亮效果。
4. <Navigate>
   1. 如果此组件被渲染，那么就会改变路径，切换视图
   2. 此组件的replace属性用于控制跳转的模式，默认是false，采用push
   3. 在版本6中删除了<redirect>，所以可以用<Navigate>来做重定向，语句一般写在最下方，因为在Routes中匹配路由是从上到下，并且在匹配上之后就不会向后匹配。

   4. <Routes>
        {/*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/}
        <Route path="/login" element={<Login/>}></Route>
        <Route path="/home" element={<Home/>}>
          {/*子路由若写/，需要带上父路由*/}
          <Route path="/home/message" element={<Message/>}>
            {/*带参数*/}
            <Route path="/home/message/detail/:id" element={<Detail/>}></Route>
          </Route>
          {/*或者不写/ */}
          <Route path="news element={<News/>}></Route>
        </Route>
        {/*代替重定向，使用*可使得所有找不到路有的路径都重定向到“/home” */}
        <Route path="*" element = {<Navigate to="/home"/>}></Route>
      </Routes>

5. <Outlet>
   1. 当<Route>产生嵌套时，渲染其对应的后续子路由，有点类似于vue里面的<router-view>