react hooks 学习之react router v6 路由表配置

/ 如果你是在ts中,那么这个这个文件名是router.ts那么这个<Home/>这里会报eslint错误,所以为了解决这个错误,直接改成router.tsx就行

javascript 复制代码
import { RouteObject } from 'react-router-dom';
import Home from '../page/Home';
import About from '../page/About';

// react router v6·路由配置
const routes: RouteObject[] = [
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '*',
    element: <div>404</div>,
  }
];

export default routes;

如果说你非要用.ts也行,就像下边这样,可以避免eslint报错

javascript 复制代码
// elements.tsx
import React from 'react';
import Home from '../page/Home';
import About from '../page/About';

export const HomeElement = <Home />;
export const AboutElement = <About />;

// routes.ts
import { RouteObject } from 'react-router-dom';
import { HomeElement, AboutElement } from './elements';

const routes: RouteObject[] = [
  {
    path: '/',
    element: HomeElement,
  },
  {
    path: '/about',
    element: AboutElement,
  },
];

export default routes;

然后就是app.tsx中渲染问题,v6版本的useRoutes很好用

javascript 复制代码
// App.tsx
import React from 'react';
import { useRoutes } from 'react-router-dom';
import routes from './router'; // 导入路由配置

function App() {
  const routing = useRoutes(routes);
  return (
    <div>
      {routing}
    </div>
  );
}

export default App;
相关推荐
十盒半价15 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
iccb101316 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
海底火旺18 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
爱学习的茄子20 分钟前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试
宇宙全栈Link21 分钟前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
南方kenny22 分钟前
从0到1理解JS事件委托:让你的代码性能提升一个level
前端·javascript
西瓜树枝22 分钟前
用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战
前端·javascript
归于尽23 分钟前
原生JS与React的事件差异
前端·javascript·react.js
艾莉丝努力练剑39 分钟前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(三)
c语言·开发语言·数据结构·学习·算法
独立开阀者_FwtCoder44 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js