React学习-路由（day5)

前端路由：一个path对应一个组件component。当我们在浏览器中访问一个path的时候，path对应的组件会在页面中进行渲染。

简单的使用案例：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter,RouterProvider } from 'react-router-dom';

//1.创建router实例对象并且配置路由对应关系

const router = createBrowserRouter([
  {
    path:'/login',
    element: <div>我是登录页</div>
  },
  {
    path:'/article',
    element: <div>我是文章页</div>
  }
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

reportWebVitals();

单独在router目录下设置路由文件：

import { createBrowserRouter, Navigate } from "react-router-dom";
import Login from "../view/Login/Login";
import Article from "../view/Home/Article";

const router = createBrowserRouter([
  {
    path:'/',
    element: <Navigate to='/login'></Navigate>
  },
  {
    path:'/login',
    element: <Login />
  },
  {
    path:'/article',
    element: <Article />
  }
])
export default router

路由导航跳转

声明式导航

通过<Link/>组件描述出想要跳转的路径

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

function login() {
  return (
    <>
      <div>登录</div>
      <Link to="/article">前往文章页面</Link>
    </>
  );
}

export default login;

如果需要传参直接通过字符串拼接参数即可

编程式导航

通过 useNavigate 钩子得到的导航方法，然后通过调用方法以命令的形式进行路由跳转。

语法说明：通过调用navigate方法传入地址path实现跳转

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

const Article=()=> {
  const navigate = useNavigate()
  return (
    <>
      <div>文章</div>
      <div>
        {/* 命令式写法 */}
        <button onClick={()=>navigate('/login')}>返回登录页</button>
      </div>
    </>
  );
}

export default Article;

路由导航传参

searchParams传参

1.传参

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

function Login() {
  const navigate = useNavigate()
  return (
    <>
      <div>登录</div>
      {/* 声明式写法 */}
      <Link to="/article">前往文章页面</Link>
      {/* 命令式写法 */}
      <button onClick={()=>navigate('/article?/id=1&name=robin')}>searchParams传参</button>
    </>
  );
}
export default Login;

2.接收

import { useNavigate, useSearchParams } from "react-router-dom";

const Article=()=> {
  const navigate = useNavigate()

  const [params] = useSearchParams()
  const id = params.get('id')
  const name = params.get('name')
  return (
    <>
      <div>文章</div>
      <div>
        {/* 命令式写法 */}
        <button onClick={()=>navigate('/login')}>返回登录页</button>
        <div>{name}</div>
      </div>
    </>
  );
}

export default Article;

params传参

//先设置路由配置
  {
    path:'/home/:username',
    element: <Home />
  }


//传参
<div>
   <button onClick={()=>navigate('/home/robin')}>params跳转传参到Home页面</button>
</div>

//接收
import { useParams } from "react-router-dom"

const Home = ()=>{
  const params = useParams()
  let name = params.username
  return (
    <>
      {name}
    </>
  )
}

export default Home

嵌套路由配置

使用

1.children属性内配置路由嵌套关系

  {
    path:'/login',
    element: <Login />,
    children:[
      {
        path:'/login/about',
        element: <About />
      }
    ]
  },

2.使用 <Outlet /> 组件配置二级路由位置（相当于vue3的<router-view></router-view>)

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

function Login() {
  const navigate = useNavigate()
  return (
    <>
      <div>登录</div>
      <div>
        一级页面
        <Link to='/login/about'>关于我们</Link>
        <Outlet></Outlet>
      </div>
    </>
  );
}
export default Login;

默认二级路由

添加index属性为true

  {
    path:'/login',
    element: <Login />,
    children:[
      {
        path:'/login/about',
        element: <About />
      },
      {
        index:true,
        path:'/login',
        element: <Help />
      }
    ]
  },

404路由配置

1.准备一个NotFound组件

2.在路由表数组的末尾，以*作为路由path配置路由

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

两种路由模式

history模式和hash模式

路由模式	url表现	底层原理	是否需要后端支持
history	url/login	history对象+pushState事件	需要
hash	url/#/login	监听hashChange事件	不需要