Why am I not able to route my app? react - react-router - redux-router

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/33062215/why-am-i-not-able-to-route-my-app-react-react-router-redux-router

标签

reactjs

react-router

redux