Question: I use react-router-redux@5.0.0-alpha.9 In App.js it works correctly, but when I try to switch to another internal root, the link in the address line changes, but the component itself does not change, although if manually changing the link component display correctly. Please tell me what is the error? Maybe I do not quite understand how to use the inner ruts ..

Simplified view of architecture:

index.js

render( <Provider store={store}> <ConnectedRouter history={history}> <App /> </ConnectedRouter> </Provider>, document.getElementById("root"), )

App.js:

 const App = ({ changeActivePage, activePage }) => ( <div> <Header changeActivePage={changeActivePage} activePage={activePage} /> <Switch> <Route exact path="/" component={MainPage} /> <Route path="/news" component={NewsPage} /> <Route path="/services" component={ServicesPage} /> <Route path="/gallery" component={GalleryPage} /> <Route path="/newspaper" component={NewspaperPage} /> </Switch> </div> )

NewsPage.js:

 render() { const { news, article, getNews, getArticle } = this.props return ( <div> <Switch> <Route exact path="/news" render={props => ( <NewsArray {...props} news={news} getNews={getNews} getArticle={getArticle} /> )} /> <Route path="/news/:id" render={props => <Article {...props} article={article} getArticle={getArticle} />} /> </Switch> <Filter getNews={getNews} /> </div> ) }

    1 answer 1

    Maybe something has changed with the version, but in react-router-redux v5.0.0-alpha.6 it worked like this:

    App:

     <Provider store={store}> <ConnectedRouter history={history}> <div className="App"> <Route exact path="/" component={MainRoute} /> <Route path="/first" component={First} /> {/* и т.д. */} </div> </ConnectedRouter> </Provider>

    Some route:

     class First extends Component { render() { return ( <div className="container"></div> ); } }
    • Yes, but this is not a nested root - Dmitry Shtern