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;
相关推荐
高山我梦口香糖7 分钟前
[react] <NavLink>自带激活属性
前端·javascript·react.js
撸码到无法自拔12 分钟前
React:组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
高山我梦口香糖12 分钟前
[react]不能将类型“string | undefined”分配给类型“To”。 不能将类型“undefined”分配给类型“To”
前端·javascript·react.js
Elena_Lucky_baby38 分钟前
实现路由懒加载的方式有哪些?
前端·javascript·vue.js
初学者7.41 分钟前
Webpack学习笔记(2)
笔记·学习·webpack
一雨方知深秋1 小时前
智慧商城:封装getters实现动态统计 + 全选反选功能
开发语言·javascript·vue2·foreach·find·every
海威的技术博客1 小时前
关于JS中的this指向问题
开发语言·javascript·ecmascript
王解1 小时前
Vue CLI 脚手架创建项目流程详解 (2)
前端·javascript·vue.js
刘大浪1 小时前
vue.js滑动到顶便锁定位置
前端·javascript·vue.js
ordinary902 小时前
指令-v-for的key
前端·javascript·vue.js