反应路由器无法获取/路由

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 - 我收到错误消息，显示 "Cannot GET /signin" 虽然应用程序我'我从中获取代码可以正常工作并显示表格！问题出在路由中，因为如果我在我的项目中将 signin.js 路由的路径设置为 '/'，则表单会毫无问题地显示在主目录中。

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

工作项目和我的项目之间的唯一区别是在工作中一个 'npm start' 脚本被定义为：

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

在我的位置：

    "start": "node server.js"

P.S。我检查了每一行以确保两个项目的代码尽可能一致。

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

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);

反应路由器无法获取/路由

react-router Cannot GET /route

jsx

ecmascript-6

react-router

webpack-dev-server

react-redux