I am struggling to get react router v6 to work properly. Given the below:
<BrowserRouter>
<Routes>
<Route index element={<div>1</div>} />
<Route path="home" element={<div>2</div>} />
<Route path="user" element={<div>3</div>}>
<Route path="profile" element={<div>3.1</div>} />
<Route path="account" element={<div>3.2</div>} />
</Route>
<Route path="*" element={<div>4</div>} />
</Routes>
</BrowserRouter>
The following paths do what I expect:
- https://localhost:3000 renders
1 - https://localhost:3000/home renders
2 - https://localhost:3000/user renders
3 - https://localhost:3000/other renders
4
The following paths do not do what I expect:
- https://localhost:3000/user/profile renders a blank page rather than
3.1 - https://localhost:3000/user/account renders a blank page rather than
3.2 - https://localhost:3000/user/other renders a blank page rather than
4 - https://localhost:3000/other/other renders a blank page rather than
4
I am aware that including <Outlet /> in the parent component (e.g. that rendered by /user) allows child components to render within it. However this only works with an index route. As soon as a second slash (e.g. /user/account) appears in the path, the request fails. Equally, the * default only renders if the unknown url contains a single /.
I must be doing something silly here since this example is essentially lifted from the instructions (https://reactrouter.com/docs/en/v6). The error the browser shows in the incorrect scenarios is (in this case the bundle.js is simply my index.html file instead of the app JS):
