Question

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

通过单击链接（反应路由器）导航到新页面组分）
成功完成调度异步操作后导航到新页面。

这是我的代码

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

你的代码似乎是正确的，但有一个简单的事情是你遗漏：你没有渲染＆＃34;孩子＆＃34;你的路由器！：）

你可以在这里查看：

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 prop来指定它。然后，每当React＆＃34;看到＆＃34;这个道具，它将渲染你的路线（它也可以是一个嵌套路线）。

因此，要修复代码，您的App组件需要正确处理this.props.children。这样的事情：

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

现在，当你点击＆＃34; / foo＆＃34;路线this.props.children将被Foo组件替换。

顺便说一句，你的嵌套路线（里面的路线）不需要有＃34; /＆＃34;，因为它们将是＆＃34; prepend＆＃34;。这是react-router呈现嵌套路由的方式。

我认为就是这样，祝你好运！：）

React-Redux中的路由问题

1 个答案: