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

React Router 4运行在Rails和React之上，但是跟随

元素会在我的服务器中触发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

  添加到我的网页开发服务器CLI
• 使用
  和

• 将尾部的

  /

  添加到我的链接<代码>
• 仅在最高级别组件上呈现
  ，并添加
  和所有路由/切换到

• 我试过使用

  精确路径

  ，

  严格路径

  ，只使用

  路径

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

什么在起作用： -我可以在组件之间切换，即使我的rails路由在

routes.rb

中有一个包罗万象的功能：

get'*path'，to:'pages#index'

这是我的最高级别组件，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')
    );
});

---

我已经通过了多个教程，我相当肯定这是正确的结构。。。我想我主要是在寻找关于什么可能会干扰React Router的任何提示，在库之外，例如webpack，在本地主机上运行等等。

我能够通过重命名我的

应用程序.html.erb

的

标记来解决这个问题。。。我不太明白为什么将

包装在一个专门称为

的标记中会导致页面重新加载/禁用客户端呈现，但在我的例子中，确实如此

你是说点击任何链接都会调用你的服务器吗？在链接上查看源代码时，您会看到什么？是的-在上面的Dashboard.js示例中，单击该登录链接会在我的服务器上执行此活动：

Started GET”/Sign-in/“for…

，然后由控制器处理。响应值200就可以了，但我知道react路由器应该都是客户端的。查看链接源实际上显示了一个常规的锚标记<代码>您是否在Rails应用程序中使用TurboLink？我这样问是因为它通常在Rails中默认激活，并且它可能会导致处理链接的方式出现问题（从而破坏您预期的React路由器行为）。不，在这个项目中没有TurboLink。使用“/”作为根路径来服务于您用来初始化React的主html页面可能是独一无二的，我从未尝试过这种配置。也许可以尝试从一些具体的路径（比如“/reactapp”）提供html？

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;

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

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