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 examples abc it displays Cannot GET /abc instead of No match found

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 examples abc it displays Cannot GET /abc instead of No match found

• javascript
• reactjs
• react-router
• react-router-dom
• react-component

• 1 Does <Route path="*" component={NoMatch} /> work? – Andy Commented Dec 29, 2018 at 18:30
• Nope, issue still persist – Bhavay Anand Commented Dec 29, 2018 at 18:32
• which version or react-router-dom are you using? – quirimmo Commented Dec 29, 2018 at 18:33
• it's [email protected] – Bhavay Anand Commented Dec 29, 2018 at 18:38
• are you getting there via a Link component (from React Router) or direct through the url? If direct, can you make a Link to '/abc' and see what happens? – Henry Woody Commented Dec 29, 2018 at 18:49

6 Answers 6

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

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.

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.

This seems to be working fine for me with latest React and react-router-dom.

import { BrowserRouter, Route, Switch } from 'react-router-dom';

const HelloWorld = () => {
return <div>Hello World</div>;
};

const Root = () => {
return (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path='/' exact component={HelloWorld} />
                <Route component={NoMatch} />
            </Switch>
        </div>
    </BrowserRouter>
  );
};

function NoMatch() {
  return (
    <div>
        <h3>No match found</h3>
    </div>
  );
}

export default Root;

Code sandbox link to try it out

From react-router-dom-v6 Switch have been replaced with Routes. Import Routes from react-router-dom and use all route as a child of Routes...

From:

<Switch>
  <Route/>
</Switch>

To:

<Routes>
   <Route />
</Routes>

Have a look into the sandbox it will help you:

https://codesandbox.io/s/py114mqzj0

Please upgrade your dependencies as follows:

"dependencies": {
    "react": "16.5.2",
    "react-dom": "16.5.2",
    "react-router-dom": "4.3.1",
},