React - Routes React key index error on element array

Question

I need to in-order to show my nav on certain elements but not others, I am passing an array to certain elements as shown in the following.

I don't have any particular unique indexing to pass to these elements either.

<Router>
  <Routes>
    <Route path="/" element={[<Navigation />, <Home />]} />
    <Route path="/Login" element={[<LoginRegister />]} />
  </Routes>
</Router>

This is the error:

react-dom.development.js:86 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at Routes (http://localhost:3000/static/js/bundle.js:94369:5)
    at Router (http://localhost:3000/static/js/bundle.js:94302:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:93111:5)
    at App (http://localhost:3000/static/js/bundle.js:71:94)
    at StateProvider (http://localhost:3000/static/js/bundle.js:9381:5)
    at QueryClientProvider (http://localhost:3000/static/js/bundle.js:91598:21)

Any suggestions are welcome.

Rendering arrays of JSX elements *could* work, but you'd need to provide a React key for each array element. Basically Konrad's answer below. I don't recommend this though as there are more React/RRD-ish ways to accomplish your goal. It'd be better to simply return a `React.Fragment` containing the JSX you want to render, or use a layout route to include the `Navigation` component on select routes. — Drew Reese, Aug 29 '22 at 21:00

score 1 · Accepted Answer · answered Aug 29 '22 at 20:55

1

Key just have to be unique string:

[<Navigation key="navigation" />, <Home key="home" />]

answered Aug 29 '22 at 20:55

Konrad

21,590
4
28
64

2

Not only strings, but any unique values among sibling elements, e.g. `[, ]`. – Drew Reese Aug 29 '22 at 21:05

React - Routes React key index error on element array

1 Answers1