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: 
我是登录页
  },
  {
    path:'/article',
    element: 
我是文章页
  }
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

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: 
  },
  {
    path:'/login',
    element: 
  },
  {
    path:'/article',
    element: 

  }
])
export default router

路由导航跳转

声明式导航

通过组件描述出想要跳转的路径

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

function login() {
  return (
    <>
      
登录
      前往文章页面
    
  );
}

export default login;

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

编程式导航

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

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

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

const Article=()=> {
  const navigate = useNavigate()
  return (
    <>
      
文章
      

        {/* 命令式写法 */}
        navigate('/login')}>返回登录页
      
    
  );
}

export default Article;

路由导航传参

searchParams传参

1.传参

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

function Login() {
  const navigate = useNavigate()
  return (
    <>
      
登录
      {/* 声明式写法 */}
      前往文章页面
      {/* 命令式写法 */}
      navigate('/article?/id=1&name=robin')}>searchParams传参
    
  );
}
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 (
    <>
      
文章
      

        {/* 命令式写法 */}
        navigate('/login')}>返回登录页
        
{name}
      
    
  );
}

export default Article;

params传参

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


//传参

   navigate('/home/robin')}>params跳转传参到Home页面


//接收
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: ,
    children:[
      {
        path:'/login/about',
        element: 
      }
    ]
  },

2.使用 组件配置二级路由位置（相当于vue3的)

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

function Login() {
  const navigate = useNavigate()
  return (
    <>
      
登录
      

        一级页面
        关于我们
        
      
    
  );
}
export default Login;

默认二级路由

添加index属性为true

  {
    path:'/login',
    element: ,
    children:[
      {
        path:'/login/about',
        element: 
      },
      {
        index:true,
        path:'/login',
        element: 
      }
    ]
  },

404路由配置

1.准备一个NotFound组件

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

  {
    path:'*',
    element:
  }

两种路由模式

history模式和hash模式

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