最新版React router v6路由写法

v6 版本相比v5使用上发生了一些改变

1. 在浏览器中使用路由，从react-router-dom中导入BrowserRouter
2. 使用link标签作为导航，跳转内容
3. Route标签作为组件容器
4. 不同于v5，v6要求Route标签必须包含在Routes标签之内
5. 对Route标签的参数也有不同，path标签路由路径url，而使用element导入对应的组件，并且使用格式；相比于v5：component={Component}
6. 案例

import { BrowserRouter,Link,Route, Routes} from "react-router-dom";

// link相当于 跳转标签，
// Route相当于容器

const Home=()=>{
    return(
        <h1>Home</h1>
    )
}
const About=()=><h1>About</h1>
const Main=()=><h1>main</h1>

export default function Basic(){
    return (
        <BrowserRouter> 
        {/* // 如果项目需要路由，需要这个组件将项目包裹，只有在内部才能使用 */}
        <ul>
            <li>
                <Link to='/'>home</Link>
            </li>
            <li>
                <Link to='/about'>about</Link>
            </li>
            <li>
                <Link to='/main'>main</Link>
            </li>
        </ul>
        {/* 使用component组件渲染对应的组件 */}
        {/* // react是包容性路由，满足条件都渲染，使用 exact精准匹配 */}
        <Routes>
           
            <Route path="/" element={<Home/>} exact></Route>
        <Route path="/about" element={<About/>}></Route>
        <Route path="/main" element={<Main/>}></Route>         
        </Routes>
        </BrowserRouter>
    )
}