React router dom v-6 not working on build version

Question

I'm working on a chat application that has some paths like below

            <Routes>
                <Route path="/" element={<WelcomeScreen />} />
                <Route path="channels" element={<Home />} />
                <Route path="channels/:id" element={<Home />} />
                <Route path="*" element={<Navigate replace to="/" />} />
            </Routes>

Once the users are authenticated, they are redirected from welcome screen to home page that has all the chats which is on /channels. So if a user were to access /channels or in the case of 404, I redirected to the / path.

Everything works fine when I run it on localhost but once I host it on netlify and when I refresh at /channels instead of redirecting I get a 404 message and <Route path="*" element={<Navigate replace to="/" />} /> Doesn't work.

Can someone tell me what's the problem? Any help would be appreciated.

Answer 1

Change your <BrowserRouter> to <HashRouter>. It lets refreshing individual page without 404 error.

Reference: https://reactrouter.com/docs/en/v6/api#reference