react-router无法获取/路由

好吧，伙计们，这是问题...我一直在使用另一个流畅运行的应用程序为我的Web应用程序编写代码作为开始的示例。这里是源代码：react-router无法获取/路由

（./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 - 一切正常，但是当我进入本地主机：3000 /登录 - 我得到错误消息，说：“无法获取/登录”通过我正在代码工作正常的应用程序并显示表格！问题出在路由上，因为如果我在项目中将signin.js路由的路径设置为'/'，则表单将显示在主目录中，没有任何问题。

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

工作项目之间的唯一区别和我是在工作一个 '故宫开始' 脚本定义为：

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

其中矿是：

"start": "node server.js"

PS我检查了每一行，以确保两个项目的代码尽可能均匀。

任何建议如何解决这个问题？谢谢

来源

2017-07-17 LiJonas

什么版本的终极版形式您使用的是？如果它的新版本，你的export语句需要改变，我可以为你提供一些代码，如果你告诉我你的package.json文件中有什么版本的redux表单。 –

@DanielZuzevich“redux-form”：“^ 3.1。7“您可以在https://github.com/LiJuons/react-dribbble/blob/master/package.json上看到我的整个软件包列表 – LiJonas

您是否尝试将npm start命令更改回其他人员的命令项目吗？还有，你个人添加的/ signin路由，还是它已经在你从中获取源代码的项目中了。我认为你有一个编译错误，你的bundle.js文件没有被更新为具有在你的应用程序中的所有JS代码都被编译为bundle.js，我不认为它已经更新到了这条路径 –

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

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

阵营路由器中输入URL不工作时手动

这是一种常见的惊喜，你是在你的应用程序，这需要使用browserHistory是相关的事实服务器本身的一些额外配置。基本上，当你手工输入网址时，默认情况下服务器会查找具有该路径的文件，存储在磁盘上 - 如果找不到，它将显示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);

来源

2017-07-18 11:49:30 BTMPL

就是这样！它现在有效，感谢您的帮助！谢谢！ – LiJonas

react-router无法获取/路由

回答

相关问题