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"

我正在使用foreman gem,它在localhost:5000上运行rails服务器和webpack-dev-server.

我尝试过的:

• 添加historyApiFallback到我的webpack-dev-server CLI
• 使用<Link />和<NavLink />
• 在/我的链接中添加尾随;<Link path='/sign-in/' component={Register} />
• 只 渲染<App />最高级别的组件,并添加<BrowserRouter />和所有路由/切换<App />
• 我已经尝试使用exact path,strict path和刚path

我很好奇,如果它是我的webpack配置的东西...如果有必要,我也可以发布它.看起来这一切都是正确的,但其他一些时髦的东西正在发生.

什么是工作: -我能组件之间,在切换,即使我的轨道路线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')
    );
});

这是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路由器的提示,在库之外,即webpack,运行在localhost等

Answer 1

我能够通过重命名<main>我的标签所application.html.erb包裹的标签来解决这个问题<%= yield %>...我不太明白为什么包裹<%= yield %>在专门调用的标签中<main>会导致页面重新加载/禁用客户端渲染，但在我的案例，确实如此！