react-redux-router 不起作用

Question

我是 Redux 的新手。现在我正在尝试使用 redux-react-router，但我遇到了问题。我点击了 links 但没有任何反应。我的应用程序不呈现组件并且不更改 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
);

并且我有 Navigation 组件 Home 组件.

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

当我点击 link... 时没有任何反应。为什么？

Answer 1

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

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

当您访问 foo link 时，它正在匹配零件并加载 Home 组件。它还匹配 URL 中的 "foo"，因此它尝试将 RegisterPage 组件添加为 Home 中的 children 属性，但该组件不会在任何地方呈现 this.props.children。这就是未呈现 RegisterPage 的原因。

react-redux-router 不起作用

react-redux-router doesn't work

reactjs

react-router

redux