Reactjs react redux路由器不'；行不通

我是Redux的新手。现在我正在尝试使用redux react路由器，但我遇到了一个问题。我点击了链接，什么也没发生。我的应用程序不会呈现组件，也不会更改URL

我有一个app.js文件，其中包含以下代码：

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
);

import'../stylesheets/main.scss'；
从“React”导入React；
从'react dom'导入{render}；
从'react redux'导入{Provider}；
从'redux'导入{combinereducer，createStore}；
从“react Router”导入{Router，Route，IndexRoute，browserHistory}；
从“react router redux”导入{routerReducer}；
从“./reducers/rootReducer”导入rootReducer；
从“/容器/主页”导入主页；
从“./containers/RegisterPage”导入RegisterPage；
输入“懒散尺寸”；
const store=createStore(
组合传感器({
减根剂，
路由：路由导出器
})
);
const rootElement=document.getElementById（'root'）；
渲染(
,
根元素
);

我有导航组件，由主页组件使用

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>
    );
  }
}

import React，{Component}来自'React'；
从“类名称”导入类名称；
从“反应路由器”导入{Link}；
导出默认类导航扩展组件{
构造函数（）{
超级（）；
此.state={
链接：[
{href:'#'，isActive:true，title:'Home'}，
{href:'/foo'，isActive:false，title:'Lorem'}
]
};
}
render（）{
返回(

{this.state.links.map（（link，i）=>{
const linkClass=类名({
链接：是的，
“链接处于活动状态”：link.isActive
});
返回(

{link.title}

);
})}

);
}
}

---

当我点击链接时。。。什么也没发生。为什么？

您的路线定义不太正确。试试这个：

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

当您访问foo链接时，它正在匹配部件并加载主组件。它还与URL中的“foo”匹配，因此它尝试在Home中添加一个RegisterPage组件作为

children

道具，但该组件不会在任何地方呈现

this.props.children

。这就是为什么没有呈现注册表页