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

Question

我对 react-router-dom v6 的用法变化很困惑。通过他们的文档，我们可以简单地将我们的 Route 组件传递到 element prop 中，但是我收到了这个错误

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-dom v6 中，path prop 只能是字符串，不再使用数组，因此您必须为每个数组显式渲染路由。

Routes and Route

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>

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

Problem with the usage of <Routes>, <Route> and <Navigate> in react-router-dom v6

reactjs

react-router-dom