React路由？

一、React路由简介
React 官方并没有提供对应的路由插件，因此，我们需要下载第三方的路由插件 —— React Router DOM。

React Router 在 2021 年 11 月份的时候更新 v6 的版本。本次课就主要讲解V6版本

二、路由配置
1、下载路由
在项目根目录中，通过以下命令

yarn add react-router-dom

2、路由配置

1）首先在react项目的入口文件index.js文件中，使用<BrowserRouter>将<App>包裹起来

import {BrowserRouter} from 'react-router-dom'
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter> 
);

BrowserRouter：包裹这个应用，一个React应用只需使用一次

在 React Router 中提供了两种路由模式：hash 和 history。

对应的的路由组件分别是：

1.HashRouter：hash 模式的路由

2.BrowserRouter：history 模式的路由

实际使用时，任选其中一个模式引入即可；

2）其次，在App.js文件中，使用<Routes>设置路由出口，使用<Route>指定导航链接

import React from 'react'
import {Routes,Route} from 'react-router-dom'
import Login from './pages/Login'
import Register from './pages/Register'
import Home from './pages/Home'
export default function App() {
  return (
   <Routes>
     <Route path='/login' element={<Login/>}></Route>
     <Route path='/register' element={<Register/>}></Route>
     <Route path='/' element={<Home/>}></Route>
   </Routes>
  )
}