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;
相关推荐
快起来别睡了8 分钟前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
蜡笔小电芯12 分钟前
【C语言】指针与回调机制学习笔记
c语言·笔记·学习
Goodbaibaibai18 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
OEC小胖胖26 分钟前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web
胡gh28 分钟前
一次点击,让你明白浏览器事件传播机制与 React 合成事件
前端·react.js
_一两风28 分钟前
深入理解 React 事件机制与 DOM 事件系统
react native·react.js
断竿散人33 分钟前
JavaScript 错误对象完全指南:内置类型解析与自定义异常实战
前端·javascript
默默地离开35 分钟前
Blob二进制处理的王者
前端·javascript·html
红衣信1 小时前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾1 小时前
深入理解 JavaScript 事件监听机制
前端·javascript