CODEWITHSUNDEEP
reactjsreact-router-dom
AnthonyDev220
AnthonyDev220

Reputation: 709

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

I'm very confused with the change of usage of react-router-dom v6. By their documentation, we can simply pass our Route component inside the element prop, but I am getting this error

Uncaught TypeError: meta.relativePath.startsWith is not a function

and I couldn't find any solutions.

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

Upvotes: 2

Views: 4624

Answers (1)

Drew Reese
Drew Reese

Reputation: 202751

In react-router-dom v6 the path prop can only be a string, arrays are no longer used so you must explicitly render a route for each.

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>

Upvotes: 6

Related Questions