react-redux 应用程序中的路由不起作用答案

【问题标题】：routing in react-redux application doesn't workingreact-redux 应用程序中的路由不起作用
【发布时间】：2016-03-05 18:46:35
【问题描述】：

路由不起作用。每条路由总是渲染组件MainPage

index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducers from './reducers'
import App from './components/App'

let store = createStore(reducers);

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector('#root')
);

带有描述路由的组件应用

import React from 'react'
import { browserHistory, Router, Route } from 'react-router'
import MainPage from '../containers/MainPage';
import FavoritesPage from '../containers/FavoritesPage';
import Error404 from '../containers/Error404';

export default () => (
    <Router history={browserHistory}>
        <Route path="/" component={MainPage}>
            <Route path="/favorites" component={FavoritesPage}/>
            <Route path="*" component={Error404}/>
        </Route>
    </Router>
);

您发现这里有什么问题吗？

【问题讨论】：

标签： reactjs react-router redux

【解决方案1】：

您的路由是嵌套的，这意味着子路由将在 MainPage 组件中呈现。有时这是需要的，您只需在某处渲染孩子：

class MainPage extends Component {
   render() {
      return (
        <div> { this.props.children }</div>
      )
   }
}

如果您不希望将内部路线移到外面：

   <Router history={browserHistory}>
        <Route path="/" component={MainPage} />
        <Route path="/favorites" component={FavoritesPage}/>
        <Route path="*" component={Error404}/>
   </Router>

【讨论】：

这个例子非常有用！非常感谢！