Logo isn't loading on nested routes

I am using react-router-dom version 6.11.1. In my header component the logo is a image tag the included image which is in my public folder. In my single route component i can see the logo but when it goes 1 step down route like nested route i can’t the see the logo its not loading anymore.
In my case it is in reset_password route.
I tested with routes as well its is the same. Can anyone help me with this

index.js file

const router = createBrowserRouter(
        <Route path='/' element={<App />}>
            <Route index={true} path='/' element={<Homepage />} />
            <Route path='/login' element={<Login />} />
            <Route path='/signup' element={<Signup />} />
            <Route path='/verification' element={<VerifyUser />} />
            <Route path='/forgot-password' element={<ForgotPassword />} />
            <Route path='/dashboard' element={<Dashboard />} />
            <Route path='/reset_password/:id' element={<ResetPassword />} />

const root = ReactDOM.createRoot(document.getElementById("root"));
        <Provider store={store}>
            <RouterProvider router={router} />

and header componenet

            <nav className='navbar navbar-expand-lg'>
                <div className='container'>
                    <Link to='/' className='navbar-brand'>
                        <ul className='navbar-nav ms-auto mb-2 mb-lg-0'>
                            <li className='nav-item'>
                                <Link to='/login' className='nav-link active' aria-current='page'>
                                    <button className='btn btn-login'>Login</button>

>Solution :

What if you remove the first dot from your logo path?
It would look like this:


This way, you have an absolute path to the logo, regardless if it is a nested route or not.

Leave a Reply