在react-router-dom v6中使用<Routes>，<Route>和<Navigate>的问题

Question

我对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>
    );
};

Answer 1

在react-router-domv6中path，prop 只能是字符串，不再使用数组，因此您必须为每个数组显式渲染一个路由。

路线与路线

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>