CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-domreact-component
Bhavay Anand
Bhavay Anand

Reputation: 335

react-router switch not working as expected

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

Upvotes: 4

Views: 26517

Answers (6)

Saravana raju R
Saravana raju R

Reputation: 121

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>

Upvotes: 1

Surekha kambariya
Surekha kambariya

Reputation: 56

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

Upvotes: 4

Deryck
Deryck

Reputation: 7658

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.

Upvotes: 3

Bhavay Anand
Bhavay Anand

Reputation: 335

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.

Upvotes: 2

Nikola
Nikola

Reputation: 1011

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

Upvotes: 1

Piyush Zalani
Piyush Zalani

Reputation: 3934

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",
},

Upvotes: 0

Related Questions