Bdtjtk

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

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

},

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 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.

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