REACT Router V6 cannot render Router inside another Router

Viewed 2863

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?

1 Answers

Put a blank div tag inside the Routes tag:

const App = () => {
const [chamber, setChamber] = useState("")
//initialise array of present speakers
const [members, setMembers] = useState([])
    
return (
        <Router>
            <div>
            <Routes> <div></div>
                <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>
)
}
Related