React-Redux 中的路由问题

Question

我是 React-Redux 生态系统的新手，通过尝试简单的应用程序来学习。 在这种情况下，我正在尝试在 react-redux 应用程序中路由是如何工作的。 基本上，这个想法是：

1. 通过单击链接导航到新页面（反应路由器 组件）
2. 成功完成分派的异步操作后导航到新页面。

这是我的代码

import React from 'react'
import {Link} from 'react-router'
import {routerActions} from 'react-router-redux'
import {connect} from 'react-redux'

class App extends React.Component {
  render() {
    // And you have access to the selected fields of the State too!
    return (
        <div>
            <header>
                Links:
                {' '}
                <Link to="/">Home</Link>
                {' '}
                <Link to="/foo">Foo</Link>
                {' '}
                <Link to="/bar">Bar</Link>
            </header>
            <div>
                <button onClick={() => routerActions.push('/foo')}>Go to /foo</button>
            </div>
        </div>
    )
  }
}
export default connect(null, null)(App);
===================================================================
import React from 'react'
import {connect} from 'react-redux'

class Foo extends React.Component {
  render() {
    return (
        <div> <h1>I'm Foo</h1> </div>
    )
  }
}
export default connect(null, null)(Foo);
===================================================================
import React from 'react'
import {connect} from 'react-redux'
class Bar extends React.Component {
  render() {
    return (
        <div> <h1>I'm bar</h1> </div>
    )
  }
}
export default connect(null, null)(Bar);

===================================================================
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {Router, Route, browserHistory} from 'react-router'
import {syncHistoryWithStore} from 'react-router-redux'
import configureStore from './store'
import App from './components/test/App';
import Bar from './components/test/Bar';
import Foo from './components/test/Foo';
// Get the store with integrated routing middleware.
const store = configureStore()
// Sync browser history with the store.
const history = syncHistoryWithStore(browserHistory, store)
// And use the prepared history in your Router
ReactDOM.render(
  <Provider store={store}>
    <div>
        <Router history={history}>
            <Route path="/" component={App}>
                <Route path="/foo" component={Foo}/>
                <Route path="/bar" component={Bar}/>
            </Route>
        </Router>
    </div>
  </Provider>,
  document.getElementById('root')
===================================================================

import {combineReducers,createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'
import userReducer from './reducers/reducer-user';
import {routerMiddleware,routerReducer} from 'react-router-redux'
import {browserHistory} from 'react-router'

export default function configureStore() {
    // Create the routing middleware applying it history
    const browserMiddleware = routerMiddleware(browserHistory);
    const logger = createLogger();
    const reducer = combineReducers({
      userState: userReducer,
      routing: routerReducer
    })
    const store = createStore(reducer,applyMiddleware(thunk,browserMiddleware,logger));
    return store;
}

应用程序构建良好，运行良好，但是当我单击链接时，它不起作用。
见screen shot of the running application
搜索并阅读了各种帖子，但我无法确定根本问题。

Answer 1

您的代码似乎是正确的，但是您缺少一件简单的事情：您没有渲染路由器的“孩子”！ :)

您可以在这里查看：

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes#sharing-our-navigation

当你想要渲染一个组件路由（你使用</Route path="application-path" component={MyComponent} /> 声明的那个）时，你需要指定它的放置位置。使用 react-router，您可以使用 children 属性指定它。然后，每当 React “看到”这个 prop 时，它就会渲染你的路由（它也可以是嵌套路由）。

因此，要修复您的代码，您的 App 组件需要正确处理 this.props.children。类似的东西：

class App extends React.Component {
   /* ... */
   render() {
       return (
           <div>
               <header>Links go here</header>
               {this.props.children}
           </div>
       )
   }
}

现在，当您点击“/foo”路由时，this.props.children 将被 Foo 组件替换。

顺便说一句，你的嵌套路由（那些在里面的）不需要有“/”，因为它们会被“前置”。这是 react-router 渲染嵌套路由的方式。

我想就是这样，祝你好运！ :)