react-redux-router doesn't work

Question

I'm a new in Redux. Now I'm trying to use redux-react-router, but I've got a problem. I clicked on links and nothing happened. My app doesn't render the component and doesn't change the URL.

I have app.js file with the following code:

import '../stylesheets/main.scss';

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { combineReducers, createStore } from 'redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { routerReducer } from 'react-router-redux';
import rootReducer from './reducers/rootReducer';

import Home from './containers/HomePage';
import RegisterPage from './containers/RegisterPage';

import 'lazysizes';

const store = createStore(
  combineReducers({
    rootReducer,
    routing: routerReducer
  })
);

const rootElement = document.getElementById('root');

render(
  <Provider store={store}>
     <Router history={browserHistory}>
      <Route path="/" component={Home}>
        <IndexRoute component={Home} />
        <Route path="foo" component={RegisterPage}/>
      </Route>
    </Router>
  </Provider>,
  rootElement
);

And I have Navigation component used by Home component.

import React, { Component } from 'react';

import classNames from 'classnames';
import { Link } from 'react-router';

export default class Navigation extends Component {

  constructor() {
    super();

    this.state = {
      links: [
        { href: '#', isActive: true, title: 'Home' },
        { href: '/foo', isActive: false, title: 'Lorem' }
      ]
    };
  }

  render() {
    return (
      <nav className="navigation" role="navigation">
        <ul className="navigation_list" role="list">
          {this.state.links.map((link, i) => {
            const linkClass = classNames({
              link: true,
              'link-active': link.isActive
            });

            return (
              <li key={i} className="item" role="listitem">
                <Link className={linkClass} to={link.href}>{link.title}</Link>
              </li>
            );
          })}
        </ul>
      </nav>
    );
  }
}

When I click on the link... nothing happens. Why?

Answer 1

Your routes aren't quite defined right. Try this:

<Router history={browserHistory}>
  <Route path="/"> <!-- No component on this line -->
    <IndexRoute component={Home} />
    <Route path="foo" component={RegisterPage}/>
  </Route>
</Router>

When you visit the foo link it was matching the part and loading up the Home component. It also matches "foo" in the URL so it tries to add a RegisterPage component as the children prop in Home, but that component doesn't render this.props.children anywhere. That's why the RegisterPage wasn't being rendered.