React(11)路由demo

1、创建项目

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

这里是在index.js文件中

javascript 复制代码
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、编程式导航

javascript 复制代码
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>

javascript 复制代码
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/> },

javascript 复制代码
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;

嵌套路由

路由跳转需要占位组件

javascript 复制代码
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页面

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

javascript 复制代码
 {
    path: "/",
    element:<Layout/>,
    children:[
      {
        index:true,
        // path:'/board',
        element:<Board/>
      },
      {
        path:'about',
        element:<About/>
      }
    ]
  },
  {
    path: "*",
    element:<NotFound></NotFound>
  }
相关推荐
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说8 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef0610 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder12 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句12 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom13 小时前
JavaScript reduce()函数详解
javascript
小飞悟13 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子13 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手13 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript