React Redux Router not routing

Question

I have the following code:

 /* index.js */ import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import { Router, Route, Link } from 'react-router' import App from './components/app'; import DetailComponent from './components/detailcomponent'; import reducers from './reducers'; const createStoreWithMiddleware = applyMiddleware()(createStore); ReactDOM.render( <Provider store={createStoreWithMiddleware(reducers)}> <Router> <Route path="/" component={App} /> <Route path="/detail" component={DetailComponent} /> </Router> </Provider> , document.querySelector('.container')); /* components/app.js */ import React from 'react'; import { Component } from 'react'; import UserListing from '../containers/user-listing'; import UserDetail from '../containers/user-detail'; export default class App extends Component { render() { return ( <div> <UserListing /> <UserDetail /> </div> ); } } /* components/detailcomponent.js */ import React from 'react'; import { Component } from 'react'; export default class DetailComponent extends Component { render() { return ( <div> This is the Detail Component! </div> ); } } /* containers/user-detail.js */ import React, { Component } from 'react'; import { connect } from 'react-redux'; class UserDetail extends Component { render() { if (!this.props.user) { return <div>Select a user to view details.</div>; } return ( <div> <h3>Details for:</h3> <div>Username: {this.props.user.username}</div> <div>E-mail: {this.props.user.email}</div> <div>Twitter: {this.props.user.twitter}</div> </div> ); } } function mapStateToProps(state) { return { user: state.activeUser }; } export default connect(mapStateToProps)(UserDetail); /* containers/user-listing.js */ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { chosenUser } from '../actions/index'; import { bindActionCreators } from 'redux'; class UserListing extends Component { renderList() { return this.props.users.map((user) => { return ( <li key={user.username} onClick={() => this.props.chosenUser(user)} className="list-group-item"> {user.username}, {user.email}, {user.twitter} </li> ); }); } render() { return ( <ul className="list-group col-sm-4"> {this.renderList()} </ul> ) } } function mapStateToProps(state) { return { users: state.users }; } function mapDispatchToProps(dispatch) { return bindActionCreators({ chosenUser }, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(UserListing); /* reducers/index.js */ import { combineReducers } from 'redux'; import UserReducer from './reducer_user'; import ActiveUser from './reducer_active_user'; const rootReducer = combineReducers({ users: UserReducer, activeUser: ActiveUser }); export default rootReducer; /* reducers/reducer_active_user.js */ export default function(state = null, action) { switch(action.type) { case 'USER_SELECTED': return action.payload; } return state; } /* reducers/reducer_user.js */ export default function () { return [ {username: 'John Doe', email: 'john@doe.com', twitter: 'johndoe1'}, {username: 'Paul Smith', email: 'smith.paul@csswizardry.com', twitter: 'csswizardry'}, {username: 'Petra Tweets', email: 'petra@tweets.me.com', twitter: 'petra'}, {username: 'Mark Chills', email: 'chillmark@company.com', twitter: 'chillymark12'}, {username: 'John McIntyre', email: 'comic@mcintyre.com', twitter: 'jokesforfun'}, ]; } 

I would like to create a route '/detail' where I'd like to display essentially what's now in containers/user-detail.js.

Now when I change the URL to /detail, the App component get's displayed.

Could you advise on how to fix the issue?

Answer 1

Your route configuration appears to be correct, so my guess is that your code is not recompiling. This could be due to, for example, a syntax error in your JS.

I'd recommend deleting your compiled JS, then seeing if you can rebuild, using your build tool (Webpack, Browserify, etc.), watching the console for errors.

Note: It's hard to reproduce the problem because your snippet isn't runnable. You could use this as your starting point: jsfiddle.net / reactjs/69z2wepo/