The following React routes code probably works in React Router v5, but gives the following error in React Router v6

Error: [Player] is not a <Route> ponent. All ponent children of <Routes> must be a <Route> or <React.Fragment>

Is it possible to update the Routes/Route code so that it works in React Router v6?

function App() {
  // Some stuff here...

  const { players, offlinePlayers } = usePlayers();


  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
        <BrowserRouter>

            <Routes>
                <Route path="/" element={<Home />} />

                <Route path="/players">
                {players.map((player) => {
                    return (
                    <Route exact key={player.name} path={`/players/${player.name}`}>
                        <Player player={player} />
                    </Route>
                    );
                })}
                </Route>
            </Routes>  

        </BrowserRouter>
    </ThemeProvider>
  )

}

The following React routes code probably works in React Router v5, but gives the following error in React Router v6

Error: [Player] is not a <Route> ponent. All ponent children of <Routes> must be a <Route> or <React.Fragment>

Is it possible to update the Routes/Route code so that it works in React Router v6?

function App() {
  // Some stuff here...

  const { players, offlinePlayers } = usePlayers();


  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
        <BrowserRouter>

            <Routes>
                <Route path="/" element={<Home />} />

                <Route path="/players">
                {players.map((player) => {
                    return (
                    <Route exact key={player.name} path={`/players/${player.name}`}>
                        <Player player={player} />
                    </Route>
                    );
                })}
                </Route>
            </Routes>  

        </BrowserRouter>
    </ThemeProvider>
  )

}

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow edited Oct 15, 2022 at 5:25 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Mar 3, 2022 at 7:28 Athena WisdomAthena Wisdom 6,8911414 gold badges4545 silver badges7979 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The Player ponent should be rendered by a Route ponent on the element prop, not as a child of the Route.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/players">
      {players.map((player) => (
        <Route
          key={player.name}
          path={`/players/${player.name}`}
          element={<Player player={player} />}
        />
      ))}
    </Route>
  </Routes> 
</BrowserRouter>

You should map Routes in their parent route. Like:

   <Route path="/players">
     {players.map((player) => (
         <Route exact key={player.name} path={`/players/${player.name}`}>
            <Player player={player} />
         </Route>
       );
     )}
   </Route>

But if you want to render dynamic player then dont use the above code for that purpose because its not best approach if you are using dynamic player.name. In your code you are creating each route for every player. So, use the following code:

<Route path="/players">
   <Route exact path={":playerName"} element={<Player/>} />
</Route>

And in Player ponent, extract playerName from params like:

let { playerName } = useParams();