React路由器4触发整页重新加载

React路由器4运行在Rails和React之上,但遵循 <Link /> 元素在我的服务器中触发GET请求,并在我的开发环境中重新加载整个页面。

以下是我正在运行的当前版本:

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

我使用的是foreman gem,它在localhost:5000上运行rails服务器和webpack dev服务器。

我所尝试的:

• 正在添加 historyApiFallback 到我的webpack dev server CLI
• 使用 <链接/> 和 <NavLink />
• 添加尾部 / 到我的链接; <Link path='/sign-in/' component={Register} />
• 翻译 只是 <App /> 在最高级别组件上,并添加 <BrowserRouter /> 以及所有路由/切换到 <应用程序/>
• 我试过使用 exact path , strict path ,然后 path

我很好奇这是否与我的网页配置有关。。。如果必要的话,我也可以发布。看起来这一切都安排得很好,但还有一些奇怪的事情正在发生。

什么 是 工作: -我可以在组件之间切换,即使我的rails在 routes.rb 具有全面性: get '*path', to: 'pages#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')
    );
});

这里是 主要的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;

渲染的组件示例, 仪表板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;

负责我的根页面的空控制器:

class PagesController < ApplicationController
end

也是我的 路线。rb型 :

Rails.application.routes.draw do
  root "pages#index"
  get '*path', to: 'pages#index'
end

我已经阅读了多篇教程,我很确定这篇文章的结构是正确的。。。我想我主要是想知道什么可能会干扰React路由器, 外部 在本地主机上运行的Web包等。