Question

我正在尝试从我的rails应用程序的公共文件夹中提供反应应用程序。我正在构建js文件并将其放在公用文件夹中。当我转到应用程序的根目录时，我可以看到js和我的index.html页面已经加载。但是，当我尝试去页面时，比如/登陆，我得到了一个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;

Answer 1

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

您通常可以通过添加catch-all路径来解决这个问题。我不太清楚轨道，但我认为this answer可能会帮助你。

Answer 2

问题是所有路由首先由rails处理，然后他将您重定向到您的react路由器所在的页面。而且您只有一个HTML页面包含您的react.js代码。当你进入/登录或任何其他页面时，你会得到错误的404，因为你没有路由来处理它。您需要为所有页面添加rails路由并将它们重定向到相同的索引页面或者捕获到同一索引页的所有路由

Answer 3

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

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

来自React-Dom的浏览器路由器无法正常工作

3 个答案: