来自 React-Dom 的浏览器路由器不起作用答案

【问题标题】：Browser Router from React-Dom not working来自 React-Dom 的浏览器路由器不起作用
【发布时间】：2018-03-17 12:43:59
【问题描述】：

我正在尝试从我的 rails 应用程序的公共文件夹中提供一个 react 应用程序。我正在构建 js 文件并将其放在公用文件夹中。进入app根目录，可以看到js和我的index.html页面已经加载完毕。但是，当我尝试转到 /landing 之类的页面时，我得到一个 404，在 Rails 中找不到路由。我无法弄清楚为什么反应路由器没有启动。这一切都适用于开发人员，我用第二台服务器为反应应用程序提供服务，我只在生产中遇到这个问题。有什么建议么？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.scss';
ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React from 'react';
import Auth from './util/auth';
import { Redirect, BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import MyAccount from './components/my_account';
import MyListings from './components/my_listings';
import LoginPage from './components/login_page';
import LandingPage from './components/landing_page';
import RegistrationForm from './components/registration_form';
import PasswordResetForm from './components/password_reset_form';
import RequestPasswordResetForm from './components/request_password_reset_form';
import {FlashMessages} from './components/flash_messages';

import $ from 'jquery';
import popper from 'popper.js';
import './stylesheets/App.css';
window.Popper = popper;
window.jQuery = $;
window.$ = $;
global.jQuery = $;
require('bootstrap');

const App = appProps => (
  <div>
    <div id="flash-messages">
      <FlashMessages />
    </div>
    <Router>
      <div className="App">
        <Switch>
          <Route exact name="index" path="/landing" component={LandingPage} />
          <Route exact name="login" path="/login" component={LoginPage} />
          <Route exact name="register" path="/register" component={RegistrationForm} />
          <Route exact name="reset_password" path="/reset_password" component={PasswordResetForm} />
          <Route exact name="reset_password_request" path="/reset_password_request" component={RequestPasswordResetForm} />
          <PrivateRoute path="/my_account" component={MyAccount}/>
          <PrivateRoute path="/my_listings" component={MyListings}/>
        </Switch>
      </div>
    </Router>
  </div>
);

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    Auth.isAuthenticated() ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)
export default App;

【问题讨论】：

标签： javascript ruby-on-rails reactjs

【解决方案1】：

使用 React Router 的一个典型问题是，您需要为所有路由返回相同的 index.html 页面 - 无论是 /、/landing-page/ 还是 /a/really/deep/route/。

您通常通过添加一条包罗万象的路线来解决这个问题。我不太了解 Rails，但我认为 this answer 可能会帮助您。

【讨论】：

【解决方案2】：

问题是所有路由首先由 rails 处理，他将您重定向到您的反应路由器所在的页面。而且您只有一个包含您的 react.js 代码的 HTML 页面。当您转到 /login 或任何其他页面时，您会收到 err 404，因为您在 rails 中没有路由来处理它。您需要为所有页面添加 rails 路由并将它们重定向到相同的索引页面或者做一个捕获所有路由到同一个索引页

【讨论】：

【解决方案3】：

有一些用于配置服务器的文档。基本上你总是需要返回带有 200 状态码的 index.html。

https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#configuring-your-server

【讨论】：