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

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

import { RouteObject } from 'react-router-dom';
import Home from '../page/Home';
import About from '../page/About';

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

export default routes;

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

// elements.tsx
import React from 'react';
import Home from '../page/Home';
import About from '../page/About';

export const HomeElement = ;
export const AboutElement = ;

// 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很好用

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

function App() {
  const routing = useRoutes(routes);
  return (
    

      {routing}
    
  );
}

export default App;