React的路由(ReactRouter)-路由导航跳转

1.第一步

// createBrowserRouter路由  RouterProvider组件
import {createBrowserRouter,RouterProvider} from 'react-router-dom'
// 创建router实例对象,并配置路由对应关系
const router=createBrowserRouter(
  [
    {
      path:'/login',
      element:<div>我是登录页</div>
    },
    {
      path:'/article',
      element:<div>我是文章页</div>
    }
  ]
)

2.第二部

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* <App /> */}
    {/* 2.路由绑定 */}
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

全部

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


// createBrowserRouter路由  RouterProvider组件
import {createBrowserRouter,RouterProvider} from 'react-router-dom'
// 创建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>
    {/* <App /> */}
    {/* 2.路由绑定 */}
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

1.路由封装

整个路由到指定文件夹(Day4-02.ReactRouter-抽象路由模块_哔哩哔哩_bilibili

文件夹修改结果如下

article.js内容

function Article(){
    return <div>我是文章界面</div>
}
export default Article

login.js内容

function Login(){
    return <div>这是登录界面</div>
}
export default Login

router/index.js得内容

import Login from '../../src/page/login'
import Article from '../../src/page/article'
import { createBrowserRouter } from 'react-router-dom'
const router =createBrowserRouter([
    {
        'path':'/login',
        element:<Login/>
    },
    {
        'path':'/article',
        element:<Article/>
    }
])
export default router

src文件夹下得index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 导入路由router
import router  from './router';
import {RouterProvider} from 'react-router-dom'



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 2.路由绑定 */}
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

路由导航跳转

import { Link } from "react-router-dom"
function Login(){
    return (
        <div>这是登录界面
            <Link to="/article">跳转文章页</Link>
        </div>
    )
}
export default Login
import { Link } from "react-router-dom"
import { useNavigate } from "react-router-dom"
function Login(){
    const navigate=useNavigate();
    return (
        <div>这是登录界面
            {/* 声明式写法 */}
            <Link to="/article">跳转文章页(标签跳转)</Link>
            {/* 命名式写法 */}
            <button onClick={()=>navigate('/article')}>编程式导航</button>
        </div>
    )
}
export default Login

3.路由导航传参

传参 useSearchParams

路由配置

import Login from '../../src/page/login'
import Article from '../../src/page/article'
import { createBrowserRouter } from 'react-router-dom'
const router =createBrowserRouter([
    {
        'path':'/login',
        element:<Login/>
    },
    {
        'path':'/article',
        element:<Article/>
    }
])
export default router

// 标签Link
import { Link } from "react-router-dom";
// 钩子函数useNavigate
import { useNavigate } from "react-router-dom";
function Login() {
  const navigate = useNavigate();
  return (
    <div>
      这是登录界面
      <br></br>
      测试传参
      <br></br>
      {/* 声明式写法 */}
      <Link to="/article?id=1&name=理想">跳转文章页(标签跳转)</Link>
      {/* 命名式写法 */}
      <button onClick={() => navigate("/article?id=1&name=理想")}>
        编程式导航
      </button>
    </div>
  );
}
export default Login;

接收参数

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



function Article(){
    const [params]= useSearchParams();
    const id=params.get('id');
    const name=params.get('name');

    return <div>我是文章界面--{id}--{name}</div>
}
export default Article

params传参

路由配置

import Login from '../../src/page/login'
import Article from '../../src/page/article'
import { createBrowserRouter } from 'react-router-dom'
const router =createBrowserRouter([
    {
        'path':'/login',
        element:<Login/>
    },
    {
        'path':'/article/:id/:name',
        element:<Article/>
    }
])
export default router

// 标签Link
import { Link } from "react-router-dom";
// 钩子函数useNavigate
import { useNavigate } from "react-router-dom";
function Login() {
  const navigate = useNavigate();
  return (
    <div>
      这是登录界面
      
      测试传参
      <br></br>
      {/* 声明式写法 */}
      <Link to="/article/1/理想">跳转文章页(标签跳转)</Link>
      {/* 命名式写法 */}
      <button onClick={() => navigate("/article/1/理想")}>
        编程式导航
      </button>
    </div>
  );
}
export default Login;

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



function Article(){
    const params= useParams();
    const id=params.id;
    const name=params.name;

    return <div>我是文章界面--{id}--{name}</div>
}
export default Article

4嵌套路由

路由配置

import Layout from '../../src/page/Layout'
import Board from '../../src/page/Board'
import About from '../../src/page/About'



import { createBrowserRouter } from 'react-router-dom'
const router =createBrowserRouter([
    
    {
        'path':'/',
        element:<Layout/>,
        children:[
            {
                'path':'board',
                element:<Board/>,
            }, {
                'path':'about',
                element:<About/>,
            }
        ]
    },
    
    
    
 
])
export default router

父级路由

import {Link, Outlet} from 'react-router-dom'

const Layout =()=>{
    return (
        <div>
            我是一级路由layout组件
            <br></br>
            <Link to="/board">面板</Link><br></br>
            <Link to="/about">关于</Link><br></br><br></br>

            {/* 二级路由得组件展示在这里 */}
            <Outlet style="margin-top:100px;margin-right:100px"></Outlet>

        </div>
    )
}
export default Layout

5.默认二级路由得配置(就是不跳转二级路由也要渲染出来)

    {
        'path':'/',
        element:<Layout/>,
        children:[
            {
                // 'path':'board',
                index:true,//只需要设置index为true,path去掉就行了
                element:<Board/>,
            }, {
                'path':'about',
                element:<About/>,
            }
        ]
    },

6.404路由配置

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

7.两种路由模式

主要换这两个方法就行

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt