Browser Router from React-Dom not working

Question

I am attempting to serve a react app from the public folder of my rails app. I am building the js file and putting it in the public folder. When I go to the root of the app, I can see that the js and my index.html page have loaded. However, when I try to go to page, like /landing, I get a 404, route not found from Rails. I can't figure out why the react router is not kicking in. This all works on dev where I am serving the react app with a second server, I only get this issue in production. Any suggestions?

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.scss';
ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React from 'react';
import Auth from './util/auth';
import { Redirect, BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import MyAccount from './components/my_account';
import MyListings from './components/my_listings';
import LoginPage from './components/login_page';
import LandingPage from './components/landing_page';
import RegistrationForm from './components/registration_form';
import PasswordResetForm from './components/password_reset_form';
import RequestPasswordResetForm from './components/request_password_reset_form';
import {FlashMessages} from './components/flash_messages';

import $ from 'jquery';
import popper from 'popper.js';
import './stylesheets/App.css';
window.Popper = popper;
window.jQuery = $;
window.$ = $;
global.jQuery = $;
require('bootstrap');

const App = appProps => (
  <div>
    <div id="flash-messages">
      <FlashMessages />
    </div>
    <Router>
      <div className="App">
        <Switch>
          <Route exact name="index" path="/landing" component={LandingPage} />
          <Route exact name="login" path="/login" component={LoginPage} />
          <Route exact name="register" path="/register" component={RegistrationForm} />
          <Route exact name="reset_password" path="/reset_password" component={PasswordResetForm} />
          <Route exact name="reset_password_request" path="/reset_password_request" component={RequestPasswordResetForm} />
          <PrivateRoute path="/my_account" component={MyAccount}/>
          <PrivateRoute path="/my_listings" component={MyListings}/>
        </Switch>
      </div>
    </Router>
  </div>
);

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    Auth.isAuthenticated() ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)
export default App;

Kris Selbekk · Accepted Answer · 2018-03-17 12:57:55Z

0

A typical gotcha with React Router is that you need to return the same index.html page for all routes - be it /, /landing-page/ or /a/really/deep/route/.

You typically solve that by adding a catch-all route. I don't know rails all that well, but I think this answer might help you out.

answered Mar 17, 2018 at 12:57

Kris Selbekk

7,6729 gold badges51 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erol · Accepted Answer · 2018-03-18 12:13:30Z

0

The problem is that all routes handled first by rails and he redirects you to the page where your react routers are. And you have only one HTML page that contains your react.js code. When you go to /login or any other page you get err 404 because you don't have a route in rails to handle it. You need to add rails routes for all your pages and redirect them to the same index page Or do a catch all routes to the same index page

edited Mar 18, 2018 at 12:13

Erol

552 silver badges8 bronze badges

answered Mar 18, 2018 at 9:37

manneta

744 bronze badges

Comments

ds011591 · Accepted Answer · 2018-04-19 14:58:48Z

0

There's some documentation for configuring your server. Basically you always need to return index.html with a 200 status code.

https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#configuring-your-server

answered Apr 19, 2018 at 14:58

ds011591

4948 silver badges20 bronze badges

Collectives™ on Stack Overflow

Browser Router from React-Dom not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related