四十六----react路由
2023-12-17 00:25:09
一、react 路由使用
import {
render } from "react-dom";
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
// import your route components too
render(
<BrowserRouter>
<Routes>
<Route path="/" element={
<App />}>
<Route index element={
<Home />} />
<Route path="teams" element={
<Teams />}>
<Route path=":teamId" element={
<Team />} />
<Route path="new" element={
<NewTeamForm />} />
<Route index element={
<LeagueStandings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>,
document.getElementById("root")
);
config+hooks用法
import {
render } from "react-dom";
import {
useRoutes, BrowserRouter } from 'react-router-dom'
function Routes() {
return useRoutes([
{
path: '/',
element: <App>,
children: [
{
path: '/,
element: <Home />,
},
{
path: '/teams',
element: <Teams />
children: [
{
path: ':tamId',
element: <Team />
}
]
}]
},
])
}
render(
<BrowserRouter>
<Routes />
</BowserRouter>,
document.getElementById("root")
)
如果是自路由则用<Outlet>占位
页面跳转
<Link to="/">To</Link>
<Navigate to="/login">To</Link>
hooks用法
const location = useLocation()
location.push("/")
const navigate = useNavigate();
navigate.push("/")
二、路由鉴权及跳转拦截
1、路由配置里带权限需求
route.js
import {
useRoutes } from "react-router"
import {
RequireAuth } from "./auth"
import Layout from "./layouts/Layout"
import About from "./pages/About"
import Account from "./pages/Account"
import Home from "./pages/Home"
import Login from "./pages/Login"
import Logout from "./pages/Logout"
export const routes = [
{
path: '/',
name: '首页',
element: <Home />,
nav: true,
},
{
path: '/about',
name: '关于我们',
element: <About />,
nav: true,
},
{
path: '/login',
name: '登录',
element: <Login />,
},
{
path: '/logout',
name: '退出登录',
element: <Logout />
},
{
path: '/account',
name: '我的账户',
element: <Account />,
auth: true,
nav: true,
}
]
function Routes () {
const r = useRoutes([
{
path: '/',
element: <Layout />,
children: routes.map(e => {
if (e.auth) {
e.element = (
<RequireAuth>
{
e.element}
</RequireAuth>
)
}
return e;
}),
}
]);
return r;
}
export default Routes;
main.js
import * as React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter } from "react-router-dom";
import Routes from "./routes";
import "./index.css";
import {
AuthProvider } from "./auth";
ReactDOM.hydrate(
<React.StrictMode>
<AuthProvider>
<BrowserRouter>
<Routes />
</BrowserRouter>
</AuthProvider>
</React.StrictMode>,
document.getElementById("root")
);
//或者
或者直接在界面编写路由,这种需要在具体组件里鉴权
使用React.lazy可以实现组件/路由懒加载,懒加载可以使得代码切割打包分开,使得首次加载的包体积变小。
import * as React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter, Routes, Route } from "react-router-dom";
import {
AuthProvider } from "./auth";
import "./index.css";
import Layout from "./layouts/Layout";
import Home from "./pages/Home";
import Login from "./pages/Login";
const Account = React.lazy(() => import("./pages/Account"));
ReactDOM.hydrate(
<React.StrictMode>
<AuthProvider>
<BrowserRouter>
<Routes>
<Route path="/" element={
<Layout />}>
<Route path="/" element={
<Home />} />
<Route path="/account" element={
文章来源:https://blog.csdn.net/chujinmaolu/article/details/134960692
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!