React（11）路由demo

1、创建项目

2.创建router实例对象和配置路由对应关系

这里是在index.js文件中

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
// 创建router实例对象和配置路由对应关系

const router= createBrowserRouter([
  {
    path: '/login',
    element: <div>login</div>
  },
  {
    path: '/article',
    element: <div>article</div>
  },
])

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

reportWebVitals();

优化

路由文件夹

组件创建和引入

index.js文件夹中使用

路由跳转

1、Link跳转

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

  <Link to="/article">跳转到文章页面</Link>

2、编程式导航

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

const Login=()=>{
  const navigate = useNavigate();
  const handleClick = () => {
    // 登录成功后跳转到文章页面
    navigate("/article");
  };
  return (
    <div>
      <h1>登录页面</h1>
      <Link to="/article">跳转到文章页面</Link>
      <button onClick={handleClick}>登录</button>
    </div>
  )
}
export default Login;

 3、路由传参

<button onClick={()=>navigate('/article?name=张三&&age=18')}>登录</button>

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

const Article=()=>{
  const[params]=useSearchParams();
  console.log(params,222);
  const name=params.get("name");  
  const age=params.get("age");

  
  return <div>Article
    <h1>文章页面{name}</h1>
  </div>
}
export default Article;

 4、params传参

 { path: "/params/:id", element: < Params/> },

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

const Article=()=>{
const params=useParams();
const {id}=params;

  return <div>Article
    <h1>params登录{id}</h1>
  </div>
}
export default Article;

嵌套路由

路由跳转需要占位组件

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

const Layout=()=>{
    return (
        <div>
            <h1>Layout</h1>
            <Link to="/board">Board</Link>
            <Link to="/about">About</Link>
            <Outlet/>
        </div>
    )
}
export default Layout;

 默认二级路由展示

需求  在页面中默认展示子路由页面

只需要将子路由设置为index：true 加上相关组件就行

404页面

只需要配置跳转地址为 *即可

 {
    path: "/",
    element:<Layout/>,
    children:[
      {
        index:true,
        // path:'/board',
        element:<Board/>
      },
      {
        path:'about',
        element:<About/>
      }
    ]
  },
  {
    path: "*",
    element:<NotFound></NotFound>
  }