Vite+TS+React的路由配置全过程

更新时间：2025年10月27日 09:20:57 作者：内向蛋挞

文章介绍了如何使用React Router DOM 6在React应用中实现路由配置,包括安装依赖、修改APP.tsx、创建路由文件、注意路由配置的细节（如路径和返回语句）以及创建页面

1.安装

npm i react-router-dom@6 --save-dev

2.更改APP.tsx

import './App.css'
import {BrowserRouter as Router ,Route} from 'react-router-dom'
import Routes from './router/index'
function App() {
  return (
    <Router>
        <Routes/>
    </Router>
  )
}

export default App

3.创建路由Router文件

4.Route文件下的Index

需要特别注意我们使用的后缀名是tsx

import Home from "@/pages/Home/home"
import Item from "@/pages/Item/item";
import { useRoutes } from "react-router-dom";
const Router=()=>{
    return useRoutes(
        [
            {
                path:"/",
                element:<Home/>,
                children:[
                    {
                        path:"/",
                        element:<Item/>,
                    }
                ]
            }
        ]
    )
}
export default Router

上面注意我使用了别类名，使用前请注意更改路径
如果子级的内容需要在父级上面显示，我们可以配置路径默认为/
容易疏漏点，index.tsx文件后缀名错误，index.tsx里没有return返回
我们使用的是useRouters操控哦

5.创建页面

import { FC } from "react";
import { Outlet } from "react-router-dom";
const Home:FC=()=>{
    return(
        <>
        <h1>页面</h1>
        <Outlet/>
        </>
    )
}
export default Home

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现绑定事件的方法实例代码详解
这篇文章主要介绍了vue实现绑定事件的方法实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
vuex(vue状态管理)的特殊应用案例分享
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2020-03-03
Vue3 携手 TypeScript 搭建完整项目结构
TypeScript 是JS的一个超级，主要提供了类型系统和对ES6的支持，使用 TypeScript 可以增加代码的可读性和可维护性，在 react 和 vue 社区中也越来越多人开始使用TypeScript，这篇文章主要介绍了Vue3 携手 TypeScript 搭建完整项目结构,需要的朋友可以参考下
2022-04-04
vue异步axios获取的数据渲染到页面的方法
今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue2.0获取鼠标位置的方法
今天小编就为大家分享一篇vue2.0获取鼠标位置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue3中watch与watchEffect的区别
vue3 新增的 Composition API中的 watchEffect 和 watch都可在 setup() 函数中使用，本文重点介绍vue3中watch与watchEffect的区别，感兴趣的朋友一起看看吧
2023-02-02
Vant 如何修改van-collapse-item右侧图标
这篇文章主要介绍了Vant 如何修改van-collapse-item右侧图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue配置文件实现代理v2版本的方法
这篇文章主要介绍了vue配置文件实现代理v2版本的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码功能
这篇文章主要介绍了 ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码,本文基于后端RuoYi-Vue 3.8.7 和前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字点选验证码为例,不需要键盘手动输入,极大优化了传统验证码用户体验不佳的问题,感兴趣的朋友一起看看吧
2023-12-12
Vue开发实现滑动验证组件
这篇文章主要为大家详细介绍了如何利用Vue开发实现简单的滑动验证组件，并且适配移动和PC，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-07-07