I'm using react-router-dom@6.0.0-beta.0
I'm using nested Routes, I only have once in my app.js but somehow I still get the error "ou cannot render a inside another . You never need more than one".
app.js:
const App = () => {
const [chamber, setChamber] = useState("")
//initialise array of present speakers
const [members, setMembers] = useState([])
return (
<Router>
<div>
<Routes>
<Route path="/" element={
<ChamberSelector setChamber={setChamber} />}>
</Route>
<Route path="presence" element={
<PresenceList members={members} setMembers={setMembers} chamber={chamber} />}>
</Route>
<Route path="body/*" element={
<BodyColumns members={members} chamber={chamber} setChamber={setChamber} />
}>
</Route>
</Routes>
</div>
</Router>
)
}
BodyColumns.js:
return (
<section>
<Navbar chamber={chamber} setChamber={setChamber} />
<Routes>
<Route path="/sl" element={<RenderSpeakerList />} />
<Route path="/cte" element={<RenderCTE />} />
<Route path="/os" element={<RenderOS />} />
<Route path="/id" element={<RenderID />} />
</Routes>
</section>
)
}
(none of the rendered elements refer to the Router).
Is this still a bug in this beta version of react router 6 or am I doing something wrong causing to re-render inside the Router?