如何将此React-router3路由器转换为React-Router4

Question

我只想查看将此react-router 3代码转换为React Router 4

的最优化的方法

const router = (
    <Provider store={store}>
        <Router history={history}>
            <Route path='/' component={App}>
                <IndexRoute component={CardsGrid}> . </IndexRoute>
                <Route path='/view/:postId' component= . {Single}></Route>
            </Route>
        </Router>
    </Provider>
) 

Answer 1

第一个chnage

// from
import { Router,Route, Redirect } from 'react-router';
// to
import { BrowserRouter as Router,Route, Redirect } from 'react-router-dom';

将<Switch>添加到路由列表中。<Route>组件不再是独有的。这意味着，即使一条路由与当前的URL匹配，也没有任何阻止兄弟姐妹路由组件匹配的。将<IndexRoute>通过常规<Route>进行重新定位。要获得类似V3的行为，您必须将 exact prop添加到路线

const router = (
    <Provider store={store}>
        <Router history={history}>
          <Switch>
            <Route exact path='/' component={App}>
               <Route exact component={CardsGrid}> . </Route>
               <Route exact path='/view/:postId' component= . {Single}></Route>
            </Route>
          </Switch>
        </Router>
    </Provider>
)