I am having a little issue with routing, my routing is working as intended however there is a slight quirk I can't figure out.
I have two routes:
domain.com
domain.com/logs
On domain.com
I have the following header.
<nav className="space-x-4">
<Link to="/">
<LinkButton btnText="Home" />
</Link>
<Link to="/logs">
<LinkButton btnText="Logs" />
</Link>
</nav>
Clicking through on these links works fine as expected. However when I am on domain.com/logs
and refresh the page i get a 404. Below is how I have set up my routing.
import Logs from './routes/Logs'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/logs" element={<Logs />} />
</Routes>
</BrowserRouter>
)
I have come across this link: https://vercel.com/docs/concepts/edge-network/frequently-asked-questions#why-do-i-see-a-404-error-when-accessing-my-deployment
I am building from the whole dir so should include the routes
folder.
Now I am not sure if this is something to do with Vercel or Vite. Any suggestions would be great. Also to note this...works perfectly locally so must be a build thing.
The index.html that serves up your website when you visit domain.com
also needs to be served up when you visit domain.com/logs
your client side routing will then work.
The react-router will then show your app in its correct state.
More info can be found here describing deployments with client side routing https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing
im not familiar with vercel but they will probably have a wildcard option to serve the index document up for any unresolved routes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.