'react-router-dom v:6 'No routes matched location "/component"'
I am transitioning to using react-router-dom v6 (used v5 before) and I am running into an unexpected warning when I try to access a specific component using the URL. Example:
- http://localhost:3000/ -> resolves just fine, loads
<Home>wrapped by<Layout>. - http://localhost:3000/createuser -> resolves, loads
<CreateUser>wrapped by<Layout>but I get aNo routes matched location "/createuser"warning in the console.
Oh, and when I switch between components using Link from react-router-dom I don't get the warning.
My app works but I'd like to avoid having any warnings, or at least understand them. Any ideas where am I going wrong?
My code is below:
App.js
// ~ cutting out imports for brevity ~
export default function App() {
return (
<Provider store={store}>
<Root />
</Provider>
)
}
Root.js
// ~ cutting out imports for brevity ~
export const Root = () => {
const dispatch = useDispatch()
const authState = useSelector((state) => state.auth)
useEffect(() => {
dispatch(_verifyAuth())
}, [dispatch])
if (authState.authenticating) {
// Show user an empty page while authenticating
return <div />
}
else if (authState.authenticated) {
// Display different content to different types of user
if (authState.userData.admin) {
return <AdminRouter />
} else if (authState.userData.user) {
return <UserRouter />
} else {
return <ErrorOccured />
}
} else {
// Unauthenticated user needs to first log in
return <AuthRouter />
}
}
AdminRouter
// ~ cutting out imports for brevity ~
export const Router = () => {
return (
<BrowserRouter>
<Layout>
<Routes>
<Route index element={<Home />} />
<Route path="/createuser" element={<CreateUser />} />
</Routes>
</Layout>
</BrowserRouter>
);
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
