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的{{1}}标记所包含的标记来解决此问题...我不太明白为什么要包装{ {1}}标记中的{1}}导致页面重新加载/禁用客户端呈现，但在我的情况下，它确实发生了！

React Router 4触发整页重新加载

1 个答案: