如何设计制作企业网站,无锡设计网站找哪家,长安网站制作,网站价值排行第九章 React Router 6
一、概述 React Router 以三个不同的包发布到 npm 上#xff0c;它们分别为#xff1a; react-router: 路由的核心库#xff0c;提供了很多的#xff1a;组件、钩子。react-router-dom: 包含 react-router 所有内容#xff0c;并添加一些专门用于 …第九章 React Router 6
一、概述 React Router 以三个不同的包发布到 npm 上它们分别为 react-router: 路由的核心库提供了很多的组件、钩子。react-router-dom: 包含 react-router 所有内容并添加一些专门用于 DOM 的组件例如 BrowserRouter等 。react-router-native: 包括 react-router 所有内容并添加一些专门用于 ReactNative 的 API例如:NativeRouter等。 与 React Router 5.x 版本相比改变了什么 内置组件的变化移除Switch/ 新增 Routes/等。 语法的变化component{About} 变为 element{About/}等。 新增多个 hookuseParams、useNavigate、useMatch等。 官方明确推荐函数式组件了 … 安装npm install react-router-dom
二、代码实战
1. 一级路由 1.1 index.html
!-- public/index.html --
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title路由测试/titlelink relstylesheet href/css/bootstrap.css /style.alex {background-color: orange !important;color: white !important;}/style/headbodydiv idroot/div/body
/html1.2 index.js
/* src/index.js */
import React from react;
import ReactDOM from react-dom;
import { BrowserRouter } from react-router-dom;
import App from ./App;ReactDOM.render(BrowserRouterApp //BrowserRouter,document.getElementById(root)
);1.3 App.jsx
/* src/App.jsx */
import React from react;
import { NavLink, Routes, Route } from react-router-dom;
import About from ./pages/About;
import Home from ./pages/Home;export default function App() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2/div/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 路由链接 */}NavLink classNamelist-group-item to/aboutAbout/NavLinkNavLink classNamelist-group-item to/homeHome/NavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* 注册路由 */}RoutesRoute path/about element{About /} /Route path/home element{Home /} //Routes/div/div/div/div/div);
}1.4 About.jsx
/* src/pages/About.jsx */
import React from reactexport default function About() {return (h3我是About的内容/h3)
}1.5 Home.jsx
/* src/pages/Home.jsx */
import React from reactexport default function Home() {return (h3我是Home的内容/h3)
}2. 重定向 2.1 App.jsx
/* src/App.jsx */
import React from react;
import { NavLink, Routes, Route, Navigate } from react-router-dom;
import About from ./pages/About;
import Home from ./pages/Home;export default function App() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2/div/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 路由链接 */}NavLink classNamelist-group-item to/aboutAbout/NavLinkNavLink classNamelist-group-item to/homeHome/NavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* 注册路由 */}RoutesRoute path/ABOUT element{About /} /Route path/home element{Home /} /Route path/ element{Navigate to/about /} //Routes/div/div/div/div/div);
}2.2 Home.jsx
/* src/pages/Home.jsx */
import React, { useState } from react;
import { Navigate } from react-router-dom;export default function Home() {const [sum, setSum] useState(1);return (divh3我是Home的内容/h3{sum 2 ? (Navigate to/about replace{true} /) : (h4当前sum的值是{sum}/h4)}button onClick{() setSum(2)}点我将sum变为2/button/div);
}3. NavLink 高亮 App.jsx
/* src/App.jsx */
import React from react;
import { NavLink, Routes, Route, Navigate } from react-router-dom;
import About from ./pages/About;
import Home from ./pages/Home;export default function App() {function computedClassName({ isActive }) {return isActive ? list-group-item alex : list-group-item;}return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2/div/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 路由链接 */}NavLink className{computedClassName} to/aboutAbout/NavLinkNavLink className{computedClassName} to/homeHome/NavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* 注册路由 */}RoutesRoute path/ABOUT element{About /} /Route path/home element{Home /} /Route path/ element{Navigate to/about /} //Routes/div/div/div/div/div);
}4. useRoutes 路由表
4.1 routes
/* src/routes/index.js */
import About from ../pages/About;
import Home from ../pages/Home;
import { Navigate } from react-router-dom;export default [{path: /about,element: About /,},{path: /home,element: Home /,},{path: /,element: Navigate to/about /,},
];4.2 App.jsx
/* src/App.jsx */
import React from react;
import { NavLink, useRoutes } from react-router-dom;
import routes from ./routes;export default function App() {//根据路由表生成对应的路由规则const element useRoutes(routes);return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2/div/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 路由链接 */}NavLink classNamelist-group-item to/aboutAbout/NavLinkNavLink classNamelist-group-item to/homeHome/NavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* 注册路由 */}{element}/div/div/div/div/div);
}5. 嵌套路由 5.1 Home.jsx
/* src/pages/Home.jsx */
import React from react;
import { NavLink, Outlet } from react-router-dom;export default function Home() {return (divh2Home组件内容/h2divul classNamenav nav-tabsliNavLink classNamelist-group-item tonewsNews/NavLink/liliNavLink classNamelist-group-item tomessageMessage/NavLink/li/ul{/* 指定路由组件呈现的位置 */}Outlet //div/div);
}5.2 Message.jsx
/* src/pages/Message.jsx */
import React from react;export default function Message() {return (divullia href/message1message001/anbsp;nbsp;/lilia href/message2message002/anbsp;nbsp;/lilia href/message/3message003/anbsp;nbsp;/li/ul/div);
}5.3 News.jsx
/* src/pages/News.jsx */
import React from react;export default function News() {return (ullinews001/lilinews002/lilinews003/li/ul);
}5.4 index.js
/* src/routes/index.js */
import About from ../pages/About;
import Home from ../pages/Home;
import Message from ../pages/Message;
import News from ../pages/News;
import { Navigate } from react-router-dom;export default [{path: /about,element: About /,},{path: /home,element: Home /,children: [{path: news,element: News /,},{path: message,element: Message /,},],},{path: /,element: Navigate to/about /,},
];5.5 App.jsx
/* src/App.jsx */
import React from react;
import { NavLink, useRoutes } from react-router-dom;
import routes from ./routes;export default function App() {//根据路由表生成对应的路由规则const element useRoutes(routes);return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2/div/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 路由链接 */}NavLink classNamelist-group-item to/aboutAbout/NavLinkNavLink classNamelist-group-item to/homeHome/NavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* 注册路由 */}{element}/div/div/div/div/div);
}
