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关于点击详情页面keep-alive的缓存问题
这篇文章主要介绍了vue关于点击详情页面keep-alive的缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue 应用中结合vux使用微信 jssdk的方法
今天小编就为大家分享一篇Vue 应用中结合vux使用微信 jssdk的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue中保留字符串中的空格完美解决方案
这篇文章主要介绍了vue中保留字符串中的空格的解决方案，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
vue设置全局变量5种方法(让你的数据无处不在)
这篇文章主要给大家介绍了关于vue设置全局变量的5种方法,通过设置的方法可以让你的数据无处不在,在项目中经常会复用一些变量和函数,比如用户的登录token,用户信息等,这时将它们设为全局的就显得很重要了,需要的朋友可以参考下
2023-11-11
vue3+pinia的快速入门使用教程
Pinia是Vue的一个存储库,它允许你跨组件/页面共享状态,下面这篇文章主要给大家介绍了关于vue3+pinia的快速入门使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
Vue 前端导出后端返回的excel文件方式
这篇文章主要介绍了Vue 前端导出后端返回的excel文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
这篇文章主要介绍了使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件 ,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-05-05
Vue3响应式对象是如何实现的(1)
这篇文章主要介绍了Vue3响应式对象是如何实现的，文章围绕主题展开详细的内容介绍具有一定的参考价值，需要的小伙伴可以参考一下
2022-08-08
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
这篇文章主要介绍了vue使用vue-router beforEach实现判断用户登录跳转路由筛选,本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建，并且具有一定的vue基础。需要的朋友可以参考下
2018-06-06
详解vuex之store源码简单解析
这篇文章主要介绍了详解vuex之store源码简单解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06