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>
  }
相关推荐
Mintopia4 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
Code季风7 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
Mintopia8 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
Jacob023414 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
晴殇i41 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
bemyrunningdog1 小时前
二进制权限控制方案
javascript·react.js·ecmascript
汪子熙1 小时前
深入探析 header facets:定位与应用
前端·javascript
江城开朗的豌豆1 小时前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
2401_881244402 小时前
javaweb———html
前端·javascript·html
江城开朗的豌豆2 小时前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js