react-router switch not working as expected
Solution 1
The code works just fine if you used create-react-app
for setting up the react project but if you're using webpack configurations for manually setting up the project it requires devServer: {historyApiFallback: true,}
for react routes to work.
Solution 2
This happens because your server is not set up to handle those routes specifically. The server it what determines what exists and what doesn't - react-router is just a tool to exploit it a bit.
Fix 1
You can avoid this issue by importing HashRouter
from the react-router-dom package, rather than BrowserRouter
.
The result will be routing based on URLs with a #/
prepending the route itself. So your route of /
will now actually be #/
.
Fix 2
Set up a reverse proxy (nginx
) as the intermediary to serve your page from the Node.js server. Use a broad wildcard or get specific if you know you need more specific configurations. It will pass along the request URI/path to node still but not try to use them as separate endpoints each time or read files from the file system.
Solution 3
First you check your react version then after do like this if v5.1 and above
In order to use v6, you'll need to convert all your elements to <Routes>
You want to replace component to element into <Route ...>
example:- App.js
import Home from "./Home";
import About from "./About";
import {BrowserRouter as Router, Route, Routes } from "react-router-dom";
function App() {
return (
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;
after that your switch related error maybe gone! if still not working comment me i will help you
Comments
-
Bhavay Anand almost 2 years
I'm learning react and got stuck at react-routes
consider the following:
import React from "react"; import { BrowserRouter, Route, Switch } from "react-router-dom"; import HelloWorld from "./HelloWorld.jsx"; const Root = () => { return ( <BrowserRouter> <div> <Switch> <Route path="/" exact component={HelloWorld} /> <Route component={NoMatch} /> </Switch> </div> </BrowserRouter> ); }; function NoMatch({ location }) { return ( <div> <h3> No match found </h3> </div> ); } export default Root;
on '/' this route, it renders
HelloWorld
component as expected but on other routes for examplesabc
it displaysCannot GET /abc
instead ofNo match found
-
Andy over 5 yearsDoes
<Route path="*" component={NoMatch} />
work? -
Bhavay Anand over 5 yearsNope, issue still persist
-
quirimmo over 5 yearswhich version or
react-router-dom
are you using? -
Bhavay Anand over 5 yearsit's [email protected]
-
Henry Woody over 5 yearsare you getting there via a
Link
component (from React Router) or direct through the url? If direct, can you make aLink
to '/abc' and see what happens? -
Bhavay Anand over 5 yearsit turns out my code is fine but webpack.config.js requires this
devServer: {historyApiFallback: true,}
for react routes to work, don't know why.
-
-
Bhavay Anand over 5 yearsThanks for the solution, actually I was using webpack configurations instead of create-react-app so webpack config requires
devServer: {historyApiFallback: true,}
for react routes. I don't what it does but adding this in webpack config file resolves the issue. -
Nikola over 5 yearshistoryApiFallback always sends responses to your index. It's required for BrowserRouter on SPAs. The HashRouter can work without the historyApiFallback, but you get those ugly hashes /#/ inside your uri.
-
Gorr1995 about 4 yearsThank you, man. I used eject in create-react-app and without this option which I added manually, the Switch component didn't work
-
T PHo almost 3 yearsThis answer needs more upvote, I didn't use create-react-app but made react project with webpack configuration, just added this option to webpack immediately solves my issue.
-
Mayur Kambariya over 2 yearsThat's work for me thanks