路由初使用
抽象路由模塊
src\page\Article\index.js
const Article = () => {
return (
<div>
<p>文章頁</p>
</div>
);
};
export default Article;
src\router\index.js
// 導入頁面
import Article from "../page/Article";
import Login from "../page/LogIn";
import { createBrowserRouter } from "react-router-dom";
// 創(chuàng)建 router 實例對象并配置路由對應關系
const router = createBrowserRouter([
{ path: "/login", element: <Login /> },
{ path: "/article", element: <Article /> },
]);
export default router;
src\index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
/*
前端路由
一個路徑 path 對應一個組件 component 當我們在瀏覽器中訪問一個 path 的時候，path 對應的組件會在頁面中進行渲染
*/
import { RouterProvider } from "react-router-dom";
// 導入路由
import router from "./router";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);
reportWebVitals();
跳轉(zhuǎn)傳參
跳轉(zhuǎn)的兩種方式
方式一：聲明式導航跳轉(zhuǎn)，原理是轉(zhuǎn)換為 a 標簽了
<Link to="/login">跳轉(zhuǎn)到登錄</Link>
方式二：命令式導航, 編程式導航是指通過useNavigate"鉤子得到導航方法，然后通過調(diào)用方法以命令式的形式進行路由跳轉(zhuǎn)，比如想在登錄請求完畢之后跳轉(zhuǎn)就可以選擇這種方式，更加靈活
語法說明：通過調(diào)用navigate方法傳入地址path實現(xiàn)跳轉(zhuǎn)
<button onClick={() => navigate("/login")}>跳轉(zhuǎn)登錄</button>
傳參的兩種方式
方式一
傳參
接收
方式二
配置
傳參
接收
配置嵌套路由
children 用來配置路由的嵌套，Outlet 是嵌套路由的出口
使用路由文章來源：http://www.zghlxwxcb.cn/news/detail-621752.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-621752.html
到了這里，關于React 路由使用-詳細介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
