React Router 4 runs on top of Rails and React, but after the <Link /> element, a GET request is launched on my server and the page reloads completely in my development environment.
Here are the current versions I'm running:
"@rails/webpacker": "^3.0.2", "react": "^16.2.0", "react-dom": "^16.2.0", "react-router-dom": "^4.2.2", "clean-webpack-plugin": "^0.1.17", "webpack-dev-server": "^2.9.5", "webpack-merge": "^4.1.1"
I am using a diamond wizard that runs the rails server and webpack-dev-server on localhost: 5000.
What I tried:
- Adding
historyApiFallback to my webpack-dev-server CLI - Using
<Link /> and <NavLink /> - Adding a
/ binding to my links; <Link path='/sign-in/' component={Register} /> - Rendering only
<App /> on the highest level component and adding <BrowserRouter /> and all routing / switching to <App /> - I tried using
exact path , strict path and just path
I am wondering if this is something with my webpack configuration ... I can post this if necessary. It all seems to be set up correctly, but something else scared is happening.
What works: - I can switch between components, although route routes in routes.rb are shared: get '*path', to: 'pages#index'
Here is my highest level, index.js
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import Main from '../react/src/components/Main'; document.addEventListener('DOMContentLoaded', () => { ReactDOM.render( <Router> <Main /> </Router>, document.getElementById('app') ); });
Here main.js :
import React from 'react'; import { Route, Switch, } from 'react-router-dom'; import Dashboard from './Dashboard'; import FormContainer from './FormContainer'; const Main = props => { return ( <main> <Switch> <Route path="/sign-in/" component={FormContainer} /> <Route path="/" component={Dashboard} /> </Switch> </main> ); }; export default Main;
An example of the component that is displayed, Dashboard.js :
import React from 'react'; import { Link } from 'react-router-dom'; const Dashboard = props => { return ( <div> <h2>Dashboard</h2> <Link to="/sign-in/">Sign In</Link> </div> ); }; export default Dashboard;
Empty controller responsible for my root page:
class PagesController < ApplicationController end
Also my routes.rb :
Rails.application.routes.draw do root "pages#index" get '*path', to: 'pages#index' end
I went through several tutorials, and I'm sure it is structured correctly ... I think that I'm basically looking for any hints as to what the React Router may interfere with outside the library, i.e. webpack, runs on localhost, etc.