我对react-router-dom v6的用法变化感到非常困惑。根据他们的文档,我们可以简单地将 Route 组件传递到 element 属性中,但我收到此错误
Uncaught TypeError: meta.relativePath.startsWith is not a function
我找不到任何解决方案。
import React from 'react';
import { Routes, Route, Navigate } from "react-router-dom";
import { Results } from './Results';
export const Catogories = () => {
return (
<div className='p-4'>
<Routes>
<Route exact path='/' element={<Navigate to='/search' />} />
<Route exact path={["/search", '/images,', '/news', '/videos']} element={<Results />} />
</Routes>
</div>
);
};
最佳答案
在 react-router-dom
v6 中,path
属性只能是字符串,不再使用数组,因此您必须为每个显式渲染路由。
declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactElement | null; index?: boolean; path?: string; // <-- string type only, no string[] }
<Routes>
<Route path='/' element={<Navigate to='/search' replace />} />
<Route path='/search' element={<Results />} />
<Route path='/images' element={<Results />} />
<Route path='/news' element={<Results />} />
<Route path='/videos' element={<Results />} />
</Routes>
关于reactjs - 在react-router-dom v6中使用<Routes>,<Route>和<Navigate>的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70901768/