React router is not working client-side. How do i fix it?

Question

I'm using React Browser Router, as an npm module (react-router-dom) with create-react-app. Routing works fine on local but not after deployment. When pressing a link I'm not taken to the desired location (for example /start). The page can not be found.

I looked at this tip but it still doesn't work.

I'm not using Heroku and I don't know if I should be.

Here are some code snippets from my react App.js:

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

import Home from "./Components/Home.jsx";
import Billigast from "./Components/Billigast";
import NoMatch from "./Components/NoMatch";
import Start from "./Components/Start";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <NavBar />
          <Switch>
            <Route path="/" component={Home} exact />
            <Route path="/start" component={Start} />
            <Route component={NoMatch} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

static.json:

{
  "root": "/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

I've tried several "root": locations. My index.html file is in root.

Here is one of the linked pages:

import React from "react";
import NavBar from "./NavBar";
import Form from "./Form";

const Start = () => {
  return (
    <div>
      <Form />
    </div>
  );
};

export default Start;

Thank you for any help!

React Router changes location internally using history.push() and showing / hiding components. Getting "The page cannot be found" sounds like the browser actually follows the link. Did you check the browser console for errors? — , Oct 13 '18 at 08:47

score 1 · Accepted Answer · answered Oct 13 '18 at 08:52

I was not importing react-router-dom NavLink properly. I was importing NavLink, but from reactstrap.

Fix (in NavBar component):

import { NavLink as RouterNavLink } from "react-router-dom";

since both reactstrap and react-router-dom uses the same name (NavLink) and i wanted to use both due to design.

I then wrapped the RouterNavLink within the NavLink like so:

<NavLink>
  <RouterNavLink to="/start">Start</RouterNavLink>
</NavLink>

It's not surprising that it did not work since i wsen't even importing correctly.

Also, i did not need the static.json file.

React router is not working client-side. How do i fix it?

1 Answers1