为什么我无法路由我的应用程序?react-react-router-redux-router [英] Why am I not able to route my app? react - react-router - redux-router

问题描述

我有一个简单的 redux/react 应用程序，我只能路由到根 /.我正在使用 react 0.14、redux 3.0.2、react-router 1.0.0-rc-3 和 redux-router1.0.0-rx-3.这是我的应用:

从'react'导入React；从 'react-dom' 导入 ReactDOM；从反应路由器"导入{路由}；从'react-redux'导入{提供者}；从'redux-router'导入{ReduxRouter}；从'./store/lcrf.store.js'导入商店；从'./containers/App'导入应用程序；从 './containers/Test' 导入测试；ReactDOM.render((<提供者商店={商店}><ReduxRouter><Route path="/" component={App}><Route path="test" component={Test}/></路线></ReduxRouter></提供者>), document.getElementById('app'));

这是我的 App 组件:

class App extends Component {使成为() {返回 (<div><h1>应用组件</h1>{this.props.children}

)}}

我的 Test 组件是一样的，没有 this.props.children.

class Test extends Component {使成为() {返回 (<div><h1>测试</h1>

)}}导出默认测试；

我正在从 express 服务器提供 index.html.这是那个文件:

var express = require('express');var app = express();无功端口= 3333;app.use(express.static('public'));app.listen(端口，错误=> {如果(错误){控制台错误(错误)；} 别的 {console.info(`服务器正在监听端口 ${port}`);}})

我的 index.html 在我的 public 目录中.

当我转到 / 时，我看到了我的 App 组件，但我无法路由到我的 Test 组件.我尝试了 /test 和 #/test，但它不起作用.我配置不正确?

解决方案

express 没有处理我的 pushState.我不知道最优雅的方式来做到这一点，但是当我添加:

app.get('*', function(request, response){response.sendfile('./public/index.html');});

到我的服务器，然后一切开始正常.我很想知道管理这个的正确方法.

I have a simple redux/react app and I am only able to route to the root /. I am using react 0.14, redux 3.0.2, react-router 1.0.0-rc-3 and redux-router1.0.0-rx-3. Here is my app:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route} from 'react-router';
import { Provider } from 'react-redux';
import { ReduxRouter } from 'redux-router';

import store from './store/lcrf.store.js';

import App from './containers/App';
import Test from './containers/Test';

ReactDOM.render((
  <Provider store={store}>
    <ReduxRouter>
        <Route path="/" component={App}>
            <Route path="test" component={Test} />
        </Route>
    </ReduxRouter>
  </Provider>
), document.getElementById('app'));

Here is my App component:

class App extends Component {
    render() {
        return (
            <div>           
                <h1>App Component</h1>
                {this.props.children}
            </div>
        )
    }
}

My Test component is the same thing, without the this.props.children.

class Test extends Component {
    render() {
        return (
            <div>
                <h1>Test</h1>
            </div>
        )
    }
}

export default Test;

I am serving the index.html from an express server. Here is that file:

var express = require('express');

var app = express();
var port = 3333;

app.use(express.static('public'));

app.listen(port, error => {
    if(error) {
        console.error(error);
    } else {
        console.info(`Server is listening on port ${port}`);
    }
})

My index.html is in my public directory.

When I go to /, I see my App component, but I cannot route to my Test component. I have tried /test and #/test, but it is not working. What I have configured incorrectly?

解决方案

express was not handling my pushState. I don't know the most elegant way to do this, but when I added:

app.get('*', function(request, response){
  response.sendfile('./public/index.html');
});

to my server, then everything started to work fine. I would love to hear the correct way to manage this.

这篇关于为什么我无法路由我的应用程序?react-react-router-redux-router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！