react路由跳转

路由安装

npm i react-router-dom

一、基础路由配置

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

// 导入 RouterProvider 和 createBrowserRouter
import { RouterProvider } from "react-router-dom";
// 导入路由配置
import router from "./router/index";

const root = ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    {/* 注入路由  */}
    <RouterProvider router={router} />
  </React.StrictMode>
);
root.render(<App />);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

import Home from "../view/home";
import Login from "../view/login";
import App from "../App";

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

// 配置路由映射 （不同的路由对应渲染不同的页面组件）
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/home",
    element: <Home />,
  },
  {
    path: "/login",
    element: <Login />,
  },
]);

export default router;

二、路由跳转方法

1. 声明式导航

// import "./App.css";
import "./App.scss";

import { useState } from "react";

import { Link } from "react-router-dom";
import Son from "./components/son";

function App() {
  ...
  return (
    <div className="App">
    ...
    <Link to="/home">路由跳转到home</Link>
    </div>
  );
}

export default App;

2. 编程式导航

// import "./App.css";
import "../App.scss";
import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();
  return (
    <div className="home">
    <h1>Home</h1>
    <button onClick={() => navigate("/login")}>路由跳转到登录</button>
  </div>
);
}

export default Home;

三、传参

<Link to="/home">路由跳转到home</Link>
  <p></p>
<Link to="/home?id=001&name=jack">路由跳转到home,id=001&name=jack</Link>

// import "./App.css";
import "../App.scss";
import { useNavigate, useSearchParams } from "react-router-dom";

function Home() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  let id = searchParams.get("id");
  let name = searchParams.get("name");

  return (
    <div className="home">
      <h1>Home</h1>
      <button onClick={() => navigate("/login")}>路由跳转到登录</button>
      <div>
        {(id && (
      <p>
        searchParams: {id} - {name}
      </p>
    )) || <p>没有参数</p>}
      </div>
    </div>
  );
}

export default Home;

import Home from "../view/home";
import Login from "../view/login";
import App from "../App";

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

// 配置路由映射 （不同的路由对应渲染不同的页面组件）
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/home",
    element: <Home />,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/login/:id/:name",
    element: <Login />,
  },
]);

export default router;

<button onClick={() => navigate("/login")}> 跳转到login </button>
  <p></p>
    <button onClick={() => navigate("/login/002/dock")}>
      params传参 跳转到login
    </button>

import { useNavigate, useParams } from "react-router-dom";
function Login() {
  const navigate = useNavigate();
  const params = useParams();

  let id = params.id;
  let name = params.name;
  return (
    <div className="Login">
      <h1>Login</h1>
      <button onClick={() => navigate("/")}>回到App页面</button>
      <div>
        <p>id: {id}</p>
        <p>name: {name}</p>
      </div>
    </div>
  );
}

export default Login;

四、嵌套路由

import Home from "../view/home";
import Login from "../view/login";
import NameList from "../components/nameList/nameList";
import NameList2 from "../components/nameList/nameList2";
import App from "../App";

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

// 配置路由映射 （不同的路由对应渲染不同的页面组件）
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "nameList",
        element: <NameList />,
      },
      {
        path: "nameList2",
        element: <NameList2 />,
      },
    ],
  },
  ...
]);

export default router;

// import "./App.css";
import "../App.scss";
import { useNavigate, useSearchParams, Outlet } from "react-router-dom";

function Home() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  let id = searchParams.get("id");
  let name = searchParams.get("name");

  return (
    <div className="home">
      <h1>Home</h1>
      <button onClick={() => navigate("/login")}>路由跳转到登录</button>
      <div>
        {(id && (
      <p>
        searchParams: {id} - {name}
      </p>
    )) || <p>没有参数</p>}
      </div>
      <div>
        <button onClick={() => navigate("nameList")}>二级路由1</button>
        <button onClick={() => navigate("nameList2")}>二级路由2</button>
      </div>
      {/* 配置二级路由出口 */}
      <Outlet />
    </div>
  );
}

export default Home;

(一) 默认二级路由

五、404地址

六、两种路由模式

(一) history

(二) hash