react-router基本写法-EW帮帮网

1. 创建项目并安装所有依赖

npx create-react-app react-router-pro
npm i

2. 安装所有的 react router 包

npm i react-router-dom

3. 启动项目

npm run start

router/index.js

// 创建路由实例 绑定path element

import Layout from "@/pages/Layout";
import Month from "@/pages/Month";
import New from "@/pages/New";
import Year from "@/pages/Year";
import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Month />,
      },
      { path: "Year", element: <Year /> },
    ],
  },
  {
    path: "/new",
    element: <New />,
  },
]);

export default router;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import router from "./router";
import { Provider } from "react-redux";
import store from "./store";

// 导入定制主题
import "./theme.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <RouterProvider router={router} />
  </Provider>
);

1. 声明式导航

import { Link } from "react-router-dom";

<Link to="/article">文章</Link>

2. 编程式导航

const { useNavigate } = require("react-router-dom");

export const Login = () => {
  const navigate = useNavigate();
  return (
    <div>
      我是登录页
      <button onClick={() => navigate("/article")}>跳转至文章</button>
    </div>
  );
};

3. 路由导航传参

(1) searchParams 传参

page/Login/index.js

const { useNavigate } = require("react-router-dom");

export const Login = () => {
  const navigate = useNavigate();
  return (
    <div>
      我是登录页
      <button onClick={() => navigate("/article?id=1001&name=jack")}>
        跳转至文章
      </button>
    </div>
  );
};

page/Article/index.js

const { useSearchParams } = require("react-router-dom");

const [params] = useSearchParams()
const id = params.get('id')
const name = params.get('name')

(2) params 传参

page/Login/index.js

const { useNavigate } = require("react-router-dom");

export const Login = () => {
  const navigate = useNavigate();
  return (
    <div>
      我是登录页
      <button onClick={() => navigate("/article/1001/jack")}>
        跳转至文章
      </button>
    </div>
  );
};

page/Article/index.js

const { useParams } = require("react-router-dom");

const params = useParams()
const id = params.id
const name = params.name

别忘在 router 里加占位符

  {
    path: "/article/:id/:name",
    element: <Article />,
  },

4. 嵌套路由配置

import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: 'board',
        element: <Board />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

export default router;

const Layout = () => {
  return (
    <div>  
        <div>我是Layout</div>
        <Link to="/board">面板</Link>
        <Link to="/about">关于</Link>
        
         {/* 二级路由出口 */}
        <Outlet />
    </div>
  );
};

export default Layout;

5. 默认二级路由配置

只需要在二级路由的位置去掉 path，设置 index 属性为 true

import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      // 设置为默认二级路由，一级路由访问的时候，它也能得到渲染
      {
        index: true,
        element: <Board />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

export default router;

const Layout = () => {
  return (
    <div>  
        <div>我是Layout</div>
        <Link to="/">面板</Link>
        <Link to="/about">关于</Link>
        
         {/* 二级路由出口 */}
        <Outlet />
    </div>
  );
};

export default Layout;

6. 404 路由配置

      {
        path: "*",
        element: <NotFound />,
      },

const NotFound = () => {
  // 自定义模版
  return (
    <div> this is NotFound </div>
  );
};

export default NotFound;

7. 两种路由模式

（1）history 模式

（2）hash 模式

不需要后端配合

import { createHashRouter } from "react-router-dom";

const router = createHashRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      // 设置为默认二级路由，一级路由访问的时候，它也能得到渲染
      {
        index: true,
        element: <Board />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

export default router;

react-router基本写法