React路由 基本使用 嵌套路由 动态路由 获取路由参数 异步路由 根据配置文件来生成路由
React-router的三个版本
- React-router 服务端渲染使用
- React-router-dom 浏览器端渲染使用
- React-router-native React-native混合开发使用
其中React-router-dom用的最多
react-router使用
安装pnpm i react-router-dom
react全局插件的使用方式
React中没有vue那样的vue.use react中使用一个插件，库，都是引入一个组件，然后把要用该插件的部分包起来
通过BroserRouter或者HashRouter包裹要使用路由的根组件
在你想使用的组件上,这里不止根组件，任何组件包裹都可使用路由 非常方便
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import {BrowserRouter,HashRouter}from 'react-router-dom';
createRoot(document.getElementById('root')!).render(
<BrowserRouter>
<App />
</BrowserRouter>
)
使用Routes组件，定义路由显示区域
使用Route组件，定义具体路由规则
使用NavLink或者Link组件，定义跳转链接
NavLink会在当前组件加个active类名这也是他与Link组件的区别
import {Routes,Route,NavLink}from 'react-router-dom';
import Page1 from './page1'
import Page2 from './page2'
import Page3 from './page3'
import Page4 from './page4'
function App() {
return (
<>
<h1>菜单</h1>
<div>
<NavLink to="/page1">page1</NavLink>
<NavLink to="/page2">page2</NavLink>
<NavLink to="/page3">page3</NavLink>
<NavLink to="/page4">page4</NavLink>
</div>
<Routes>
<Route path="/page1" element={<Page1></Page1>}></Route>
<Route path="/page2" element={<Page2></Page2>}></Route>
<Route path="/page3" element={<Page3></Page3>}></Route>
<Route path="/page4" Component={Page4}></Route>
</Routes>
</>
)
}
嵌套路由
Navigate-路由重定向
Outlet，嵌套路由的子路由显示处
//page1.tsx
import {Outlet} from 'react-router-dom'
export default function page1 (){
return (
<>
<h1>page1</h1>
<Outlet></Outlet>
</>
)
}
//app.tsx
<Route path="/page1" element={<Page1></Page1>}>
<Route path="son" element={<Page1Son></Page1Son>}></Route>
</Route>
动态路由
<Route path="/page3/:id" element={<Page3></Page3>}></Route>
获取路由参数
Params参数
import {useParams} from 'react-router-dom'
export default function page3 (){
let params = useParams()
console.log(params);
return <h1>page3</h1>
}
Query参数
//地址栏信息http://localhost:5173/page4?a=123&b=456
import {useSearchParams} from "react-router-dom"
export default function page4 (){
let [searchparams,setSearchParams] = useSearchParams();
console.log(searchparams.get('a'))
return (
<>
<h1>page4</h1>
<button onClick={
() => {
setSearchParams({
a:"666",
b:"777"
})
}
}>
改变
</button>
</>
)
}
Location信息
import {useLocation}from 'react-router-dom'
export default function page2 (){
let location = useLocation();
console.log(location);
return <h1>page2</h1>
}
控制跳转地址
useNavigate创建跳转方法 然后跳转
import {Outlet,useNavigate} from 'react-router-dom'
export default function page1 (){
let nav = useNavigate()
return (
<>
<h1>page1</h1>
<Outlet></Outlet>
<button onClick={
() => {
nav("/page2",{
state:{
token:"hello"
}
})
}
}>
</button>
</>
)
}
异步路由
React做异步路由，要配合导react本身的一个方法-lazy和一个组件suspense
<Route path="/page4" element={
<Suspense fallback={<h2>加载中...</h2>}>
<LazyPage4 />
</Suspense>
}></Route>
根据配置文件生成路由
//routerArr.tsx
import Page1 from '../page1'
import Page2 from '../page2'
import Page3 from '../page3'
import Page4 from '../page4'
export default [
{
path:'/page1',
component:Page1
},
{
path:'/page2',
component:Page2
},
{
path:'/page3',
component:Page3
},
{
path:'/page4',
component:Page4
},
]
//router.tsx
import {Route} from 'react-router-dom'
const RouterMap = (routerArr:any) => {
return routerArr.map((item:any) => {
return <Route path={item.path} Component={item.component} ></Route>
})
}
export default RouterMap
//app.tsx
<Routes>
{ RouterMap(routerArr)}
</Routes>
本篇文章到这里就结束了，如果对你有用的话就点个关注吧 会持续更新技术文章
原文地址：https://blog.csdn.net/weixin_63625059/article/details/142930724
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！