React 之 react-router-dom

1、项目初始化

创建项目

npx create-react-app react-router

安装 react-router-dom

npm i react-router-dom

2、快速体验

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import { createBrowserRouter, RouterProvider, } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/login',
    element: <div>这是登录页</div>,
  },
  {
    path: '/home',
    element: <div>这是首页</div>,
  },
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

3、路由模块化

page/Login/index.js

import React from "react";

const Login = () => {
    return <div>这是登录页面</div>
}

export default Login;

page/Home/index.js

import React from "react";

const Home = () => {
    return <div>这是主页</div>
}

export default Home;

router/index.js

import React from 'react'
import { createBrowserRouter } from 'react-router-dom'
import Home from '../page/Home'
import Login from '../page/Login'

const router = createBrowserRouter([
    {
        path: '/login',
        element: <Login />,
    },
    {
        path: '/home',
        element: <Home />,
    },
])

export default router;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

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>
);

3、路由跳转

3.1 声明式跳转

使用 <Link />

<Link to="/home">跳转到主页</Link>

示例：

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

const Login = () => {
    return (
        <div>
            <h1>登录页面</h1>
            <Link to="/home">跳转到主页</Link>
        </div>
    )
}

export default Login;

3.2 编程式跳转

使用 useNavigate()
示例：

import React from "react";
import { useNavigate } from 'react-router-dom'

const Login = () => {
    const navigate = useNavigate();
    return (
        <div>
            <h1>登录页面</h1>
            <button onClick={() => navigate('/home')}>跳转到主页</button>
        </div>
    )
}

export default Login;

4、路由传参

4.1 useSearchParams 传参

传参：

navigate('/home?name=xiao&age=11')

接收参数：

const [searchParams] = useSearchParams();
const name = searchParams.get('name');
const age = searchParams.get('age');

示例：

Login/index.js

import React from "react";
import { useNavigate } from 'react-router-dom'

const Login = () => {
    const navigate = useNavigate();

    return (
        <div>
            <h1>登录页面</h1>
            <button onClick={() => navigate('/home?id=101&name=React')}>路由传参</button>
        </div>
    )
}

export default Login;

Home/index.js

import React from "react";
import { useSearchParams } from "react-router-dom";


const Home = () => {
    const [searchParams] = useSearchParams();
    const id = searchParams.get('id');
    const name = searchParams.get('name');

    return (
        <div>
            <p>id： {id}</p>
            <p>名字： {name}</p>
        </div>
    )
}

export default Home;

4.2 useParams 传参

路由：

{
    path: '/home/:id/:name',
    element: <Home />,
}

传参：

navigate('/home/102/react')

获取参数：

const params = useParams();
const { id, name } = params;

示例：

router/index.js

import React from 'react'
import { createBrowserRouter } from 'react-router-dom'
import Home from '../page/Home'
import Login from '../page/Login'

const router = createBrowserRouter([
    {
        path: '/login',
        element: <Login />,
    },
    {
        path: '/home/:id/:name',
        element: <Home />,
    },
])

export default router;

Login/index.js

import React from "react";
import { useNavigate } from 'react-router-dom'

const Login = () => {
    const navigate = useNavigate();

    return (
        <div>
            <h1>登录页面</h1>
            <button onClick={() => navigate('/home/102/react')}>路由传参</button>
        </div>
    )
}

export default Login;

Home/index.js

import React from "react";
import { useParams } from "react-router-dom";

const Home = () => {
	const params = useParams();
	const { id, name } = params;

    return (
        <div>
            <p>id： {id}</p>
            <p>名字： {name}</p>
        </div>
    )
}

export default Home;

5、嵌套路由

使用方法：

1、使用 children 配置路由嵌套关系
2、使用 <Outlet /> 配置二级路由组件渲染位置

创建 page/Layout/index.js

import React from "react";
import { Link, Outlet } from "react-router-dom";

export const Layout = () => {
    return (
        <div>
            <h1>这是一级路由</h1>
            <div>
                <Link to="/about">about</Link>
            </div>
            <div>
                <Link to="/detail">detail</Link>
            </div>

            {/* 二级路由出口 */}
            <Outlet />
        </div>
    )
}

export default Layout;

创建 page/About/index.js

import React from "react";

const About = () => {
    return (
        <div>
            这是 About 组件
        </ div>
    )
}

export default About;

创建 page/Detail/index.js

import React from "react";

const Detail = () => {
    return (
        <div>
            这是 Detail 组件
        </ div>
    )
}

export default Detail;

配置路由 router/index.js

import React from 'react'
import { createBrowserRouter } from 'react-router-dom'
import Home from '../page/Home'
import Login from '../page/Login'
import Layout from '../page/Layout'
import About from '../page/About'
import Detail from '../page/Detail'

const router = createBrowserRouter([
    {
        path: '/',
        element: <Layout />,
        children: [
            {
                path: '/about',
                element: <About />
            },
            {
                path: '/detail',
                element: <Detail />
            }
        ]
    },
    {
        path: '/login',
        element: <Login />,
    },
    {
        path: '/home/:id/:name',
        element: <Home />,
    },
])

export default router;

5.1 默认路由

router/index.js
使用 index

{
    path: '/',
    element: <Layout />,
    children: [
        {
            // path: '/about',
            index: true,
            element: <About />
        },
        {
            path: '/detail',
            element: <Detail />
        }
    ]
},

Layout/index.js 修改路径：

{/* <Link to="/about">about</Link> */}
<Link to="/">about</Link>