Question

好的，大家好，这就是问题......我一直在为我的网络应用程序编写代码，使用另一个流利的应用程序作为开始的例子。这是源代码：

（./ 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')
    );

（./部件/ 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>
        );
      }
    }

（./组件/ 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时 - 我收到错误消息，上面写着＆＃34;无法获取/登录＆＃34;那个应用程序，我正在使用正确的代码并显示表单！问题出在路线上，因为如果我将signin.js路线设置为＆＃39; /＆＃39;在我的项目中，表单显示在主目录上没有任何问题。

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

工作项目与我的工作项目之间的唯一区别在于，在工作项目开始之前。脚本定义为：

    "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

手动输入网址时，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无法GET /路由

1 个答案: