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

/ 如果你是在ts中，那么这个这个文件名是router.ts那么这个<Home/>这里会报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: <Home />,},{path: '/about',element: <About />,},{path: '*',element: <div>404</div>,}
];export default routes;

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

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

// 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;