react路由的使用

安装

javascript 复制代码
npm install react-router-dom

main.tsx中配置

javascript 复制代码
import React from 'react'
import { RouterProvider } from 'react-router-dom'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import 'normalize.css'
import './index.css'

import router from './router/index.ts'

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

router文件夹下index.ts路由表配置

javascript 复制代码
import { createBrowserRouter } from "react-router-dom";
import Layout from "@/pages/layout/Layout";
import Login from "@/pages/login/Login";
import Home from "@/pages/home/Home";


import type { Routes } from '@/types/router'

const routes:Array<Routes> = [
    {
        path:'/',
        //注意:这里C要大写
        Component:Layout,
        children:[
            //react-router路由表配置没有redirect重定向,故此在这里多加一项Home配置,同样能达 
            //到重定向效果
            {
                path:'/',
                Component:Home
            },
            {
                path:'/home',
                Component:Home
            }
        ]
    },
    {
        path:'/login',
        Component:Login
    }
]

const router = createBrowserRouter(routes)



export default router

App组件中使用

javascript 复制代码
import { Outlet } from 'react-router-dom'
import "./App.less";

function App() {

  return (
    <div className="app">  
       <Outlet />
    </div>
  );
}

export default App;

获取路由路径 useLocation

编程式导航 useNavigate

获取路由参数 useParams

相关推荐
Mintopia6 分钟前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia7 分钟前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc
VueVirtuoso8 分钟前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
少年阿闯~~14 分钟前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher16 分钟前
CSS 继承 (Inheritance)
前端·css
祈祷苍天赐我java之术24 分钟前
Vue 整体框架全面解析
前端·javascript·vue.js
洛小豆1 小时前
Git 打标签完全指南:从本地创建到远端推送
前端·git·github
世间小小鱼1 小时前
【爬坑指南】亚马逊文件中心 AWS S3 预签名URL 前端直传
前端·云计算·aws
华仔啊1 小时前
前端登录token到底应该存在哪?LocalStorage、SessionStorage还是Cookie?一篇说透!
前端·javascript
BeefyBytes1 小时前
动态组件库建设
前端