URLs with a space character in them used to be working fine. They stop working with React Router version 6. Has anyone encountered this issue? How do I go about fixing it?
The URL is dynamically created based on data from a JSON file.
Here is a code sample
<Routes>
<Route path="/working" element={<Working />} />
<Route path="/an example" element={<Example />} />
<Route path="*" element={<NotFound />} />
<Routes>
Why have spaces in your route path? I suppose if you must have them you can URL encode them, i.e. "/an%20example".
Example:
function App() {
return (
<div className="App">
<ul>
<li>
<Link to="/an example">an example</Link>
</li>
</ul>
<Routes>
<Route path="/working" element={<Working />} />
<Route path={encodeURI("/an example")} element={<Example />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
);
}
