0
238
Viewshow to specify multiple parameters in path react-route-dom 6
tell me how in version 6 of the route - pass several values to path in version 5 this could be done through an array
<Routes>
{token
?
<Route path={'chat'} element={<Chat/>}/>
:
<Route path={'/'} element={<Login/>}/>}
</Routes>
·
Juan Pablo Isaza
1 answers
Answer question0
In react-router-dom v6 the Route component's path prop takes only a single string path value, not an array like previous versions did.
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 }
You will need to render individual routes for each path.
Example:
<Route path='/' element={<Login />} />
<Route path='/home' element={<Login />} />
<Route path='/login' element={<Login />} />
Or abstract this utility into a function (not a component!) It needs to be a function call as only Route or React.Fragment components are valid children of the Routes component.
const renderPaths = (paths, Element) =>
paths.map((path) => <Route key={path} path={path} element={Element} />);
...
<Routes>
{renderPaths(["/", "/home", "/login"], <Login />)}
</Routes>
·
Juan Pablo Isaza
Report
Answer question