'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 a No 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