react-router 无法获取 /route

Question

好的，伙计们，问题来了……我一直在为我的 Web 应用程序编写代码，并使用另一个可以流畅运行的应用程序作为开始的示例。以下是源代码：

(./app.jsx)

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { createStore, applyMiddleware } from 'redux';
    import { Router, Route, IndexRoute, browserHistory } from 'react-router';

    import App from './components/app';
    import Signin from './components/auth/signin';
    import reducers from './reducers';

    const createStoreWithMiddleware = applyMiddleware()(createStore);

    ReactDOM.render(
      <Provider store={createStoreWithMiddleware(reducers)}>
        <Router history={browserHistory}>
          <Route path='/' component={App}>
            <Route path='signin' component={Signin} />
          </Route>
        </Router>
      </Provider>,
      document.getElementById('app')
    );

(./components/app.js)

    import React, { Component } from 'react';
    import Header from './header';

    export default class App extends Component {
      render() {
        return (
          <div>
            <Header />
            {this.props.children}
          </div>
        );
      }
    }

(./components/auth/signing.js)

    import React, { Component } from 'react';
    import { reduxForm } from 'redux-form';

    class Signin extends Component {
      handleFormSubmit({ email, password }) {
        console.log(email, password);
      }

      render() {
        const { handleSubmit, fields: { email, password }} = this.props;

        return (
          <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
            <fieldset className="form-group">
              <label>Email</label>
              <input {...email} className="form-control"/ >
            </fieldset>
            <fieldset className="form-group">
              <label>Email</label>
              <input {...password} className="form-control"/ >
            </fieldset>
            <button action="submit" className="btn btn-primary">Sign in</button>
          </form>
        );
      }
    }

    export default reduxForm({
      form: 'signin',
      fields: ['email', 'password']
    })(Signin);

（你可以在这里看到我的整个仓库：https://github.com/LiJuons/react-dribbble）

问题是，当我转到 localhost:3000 时 - 一切正常，但是当我输入 localhost:3000/signin 时 - 我收到错误消息，上面写着“无法获取 /signin”，尽管我正在从工作中获取代码的应用程序正确并显示形式！ 问题出在路由中，因为如果我在项目中将 signin.js 路由的路径设置为“/”，则表单将毫无问题地显示在主目录中。

两个项目中的Package.json文件相同（包数相同，版本和依赖项相同），只是启动脚本不同，所以...

工作项目和我的唯一区别在于，在工作中，一个“npm start”脚本被定义为：

    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"

它在我的哪里：

    "start": "node server.js"

附：我检查了每一行，以确保两个项目的代码尽可能同质。

有什么建议可以解决这个问题吗？ 谢谢

Answer 1

您的服务器可能未配置为支持 HTML5 历史记录。

看看https://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd

手动输入 URL 时 React-router 不起作用

这是一个常见的惊喜，并且与您在应用程序中使用 browserHistory 的事实有关，这需要对服务器本身进行一些额外的配置。基本上，当您手动键入 URL 时，默认情况下，服务器将查找具有该路径的文件，存储在其磁盘上 — 如果找不到，它将显示 404 错误。您要做的是在内部将请求重定向到应用程序的索引。

您可以查看 react-router v3 关于此设置的文档（别担心，它仍然适用于 react-router 4！）。常用配置有：

快递：

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()
// this assumes that all your app files
// `public` directory relative to where your server.js is
app.use(express.static(__dirname + '/public'))

app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("Server started on port " + port);