在react-redux應用程序中路由不起作用

Question

路由不起作用。每條路線總是呈現組件的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> 
); 

你在這裏看到的任何問題？

Answer 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>