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

应用程序构建良好,它很好,但当我点击链接,它不起作用.
查看运行的应用程序的屏幕截图
搜索并阅读各种帖子,但我无法确定根本问题.

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，您可以使用childrenprop来指定它。然后，每当 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渲染嵌套路由的方式。

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