React Router 4 触发整页重新加载

Question

React Router 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"

我正在使用工头 gem，它在 localhost:5000.

上运行 rails 服务器和 webpack-dev-server

我试过的：

正在将 historyApiFallback 添加到我的 webpack-dev-server CLI
使用 <Link /> 和 <NavLink />
在我的链接中添加尾随 /； <Link path='/sign-in/' component={Register} />
渲染just <App />在最高级别的组件，并将<BrowserRouter />和所有routing/switching添加到<App />
我试过使用 exact path、strict path 和 path

我很好奇它是否与我的 webpack 配置有关...如果需要，我也可以 post。看起来这一切都设置正确，但还有一些奇怪的事情正在发生。

的作用： - 我可以在组件之间切换，即使我在 routes.rb 中的 rails 路由有一个包罗万象的：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')
    );
});

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

渲染的组件示例，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;

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

class PagesController < ApplicationController
end

还有我的routes.rb:

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

我已经阅读了多个教程，我相当确定它的结构是正确的...我想我主要是在寻找任何关于可能干扰 React Router 的提示，在库之外，即 webpack，本地主机上的运行等

Answer 1

我能够通过重命名 <main> 的标签来解决这个问题，我的 application.html.erb 的 <%= yield %> 标签被包裹在...我不太明白为什么将 <%= yield %> 包装在一个专门称为 <main> 的标记中会导致页面 reload/disables 客户端呈现，但在我的情况下，确实如此！

React Router 4 触发整页重新加载

React Router 4 triggering full page reload

ruby-on-rails

reactjs

react-router

react-router-v4