react-router-dom v6基础

react 配置路由-入门版

## 项目下执行命令
npm install --save react-router-dom
或者
npm install react-router-dom@6

新建文件： pages/Home/index.jsx

import React from "react";
const Home = () =>{
    
    
    return(
        <div>
        Home 首页
        </div>
    )
}

export default Home

新建文件： pages/Userome/index.jsx

import React from "react";

const User = () =>{
    
    
    return(
        <div>
        User
        </div>
    )
}

export default User

建路由文件：router/index.jsx

import React from "react";
import {
    
     BrowserRouter, Routes,Route,Link } from "react-router-dom";
import Home from '../pages/Home'
import User from '../pages/User'

import BottomNav from "../components/BottomNav";
 
const AppRouter = () =>{
    
    
    return(
        // 声明当前要用一个非hash模式的路由
         <BrowserRouter>
            <BottomNav />
           {
    
    /*指定跳转的组件 to用来配置路由地址
            <Link to="/">首页</Link>
           <Link to="/user">我的</Link> */}
           {
    
    /* 路由出口 */}
            <Routes>
                <Route exact path="/" element={
    
    <Home/>}></Route>
                <Route path="/user" element={
    
    <User/>}></Route>
            </Routes>
          
        </BrowserRouter>
     )
}

export default AppRouter;
 

在主文件 src/index.js 文件中加入路由

import React from 'react';
import ReactDOM from 'react-dom/client';
import AppRouter from './router/index'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <AppRouter/>
   </React.StrictMode>
);
 
 

效果如下--------------