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;
相关推荐
宁清明26 分钟前
【小宁的学习日记2 C语言】C语言判断
c语言·学习·算法
又是忙碌的一天4 小时前
算法学习 13
数据结构·学习·算法
微露清风7 小时前
系统性学习C++-第八讲-vector类
java·c++·学习
程序猿阿伟7 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
月临水7 小时前
Git 学习笔记
笔记·git·学习·1024程序员节
奋斗的牛马7 小时前
FPGA—ZYNQ学习Debug(三)
学习·fpga开发
尘觉7 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
qq_401700418 小时前
matlab学习
学习·算法·matlab
hd51cc8 小时前
C++ 类的学习(四) 继承
开发语言·c++·学习
chxii9 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库