React+Typescript+react-router 6 创建路由操作

本文我们来看看路由的安装 其实路由的操作没有什么变化 但是还是给大家讲一下

那么我们打开项目

在项目终端输入

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

安装 一下 react-router 和 react-router-dom

这都是react开发很基本的插件了

不过大家安装前先注意好我的版本 react路由每个版本其实差异都还挺多的

这里 我们在src目录下创建一个文件夹 叫 router

然后 我们在下面创建一个 文件 叫 AppRouter.tsx

AppRouter.tsx组件编写代码如下

typescript 复制代码
import { Route, BrowserRouter as Router, Routes, Outlet } from "react-router-dom";

import App from "../App";
export default function AppRouter() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Outlet />}>
          <Route index element={<App />} />
        </Route>
      </Routes>
    </Router>
  );
}

这边 我们声明了一个路由 路径是 / 渲染我们的 App组件

这里需要注意的是 在react-router-dom版本6中,exact属性已经被移除了。

而精准匹配可以通过这个 Outlet 特性来实现

如果你有多个路由 皆可以这样

大概归结为两个点 父组件设置 Outlet 就可以精准匹配 index 会被设置为路径 /

然后 我们找到src下的 index.tsx组件 将原本 App组件的引入位置 换成我们的路由组件

然后 我这边 App组件就顺便写的什么 测试一下效果就好了

然后启动项目

也是没有任何问题

相关推荐
骑自行车的码农9 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
山河木马26 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
努力只为躺平30 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手32 分钟前
大保剑:Promise的有趣体验
javascript
李大玄33 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵33 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子1 小时前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
谦哥1 小时前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
Spider_Man1 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm