佛山网站制作平台,阿里云万网域名,建网站难吗,网站的空间需要续费么/ 如果你是在ts中#xff0c;那么这个这个文件名是router.ts那么这个Home/这里会报eslint错误#xff0c;所以为了解决这个错误#xff0c;直接改成router.tsx就行
import { RouteObject } from react-router-dom;
import Home from ../page/Home;
import About fr…/ 如果你是在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: div404/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;
