安装

npm i react-router-dom 在src目录中新建router文件夹，文件夹中新建index.jsx,内容为：

import App from '../App'
import Home from '../Home'
import List from '../List'
import Detail from '../Detail'
//将所有页面import进来
//BrowserRouter-history模式，HashRouter-hash模式
import {BrowserRouter,Routes,Route}  from 'react-router-dom'
const BaseRouter=()=>{
    return (
       < BrowserRouter>
            <Routes>
                <Route path="/" element={<App/>}>
                     <Route path="/home" element={<Home/>}> </Route>
                    //带参数
                     <Route path="/list/:id" element={<List/>}> </Route>
                     <Route path="/detail" element={<Detail/>}> </Route>
            </Route>
             <Route path="*" element={<Error/>}> </Route>
            </Routes>
            
        </BrowserRouter>
    )
}
export default BaseRouter

2.在index.js中 import Router from './router'

//react18的写法
ReactDOM.createRoot( document.getElementById('root')).render(<React.StrictMode>
  <Router/>
  
</React.StrictMode>)

3.App.js中

import {Outlet,Link,useLocation,useNavigate} from 'react-router-dom'
export default function App(){
     //当前路由
    const location=useLocation()
    const navigate=useNavigate()
   
    
    //触发事件跳转
    const goDetail=()=>{
        navigate('/home')
    }
return (
<div>
<Link to="/home?id=111">首页</Link>
<Link to="/list/123">首页</Link>
{/*outlet中展示路由页面的内容*/}
<Outlet/>
</div>
)
}

4.其它页面使用路由参数等

//获取/参数
import {useParams,useSearchParams,useNavigate,useLocation} from 'react-router-dom'

const {id}=useParams()
//获取?参数
 const navigate=useNavigate()
const [xxx]=useSearchParams()
  xxx.getAll('id')

//事件跳转传参
 navigate('/home',{state:{id:1,name:'mmc'}})

//使用
 
let location=useLocation()
console.log(location.state)

react项目使用路由

安装