将React-Router从2.x升级到4.x问题

Question

如果此React Web应用程序似乎管理不良（例如，看起来NPM软件包似乎是从Node_modules中取出的，并通过另一个文件路径，将NPM软件包从node_modules中获取，则该项目被列入了。并删除了所有格式，因此基本上是不可读的。

尽我最大的努力与之合作，但是我对异步有一个问题（随着时间和时间的工作，仍然无法正常工作）。我认为，如果我从2.x更新到4.x，则该应用程序以及这个异步问题将受益。因此，我删除了对旧扭曲的React-Router软件包的任何提及，并在Node_modules中安装了新的最新副本。除了它似乎与以前有很大不同。我现有的路线不起作用，而且似乎也弄乱了/发布请求吗？（但不能确认）

这是我的原始React-Router 2.x代码：

const { Router, Route, browserHistory,IndexRoute }=ReactRouter;
//(seems like there are additional references to this in webpack etc that enables it to work)
render(){
    return (
        <div>
            <Router history={browserHistory}>
                <Route name='home' path={'/'+contextName}>
                    <IndexRoute  component={LandingPage}/>
                    <Route name='templates' path='templates'>
                        <IndexRoute component={JobPage}/>
                        <Route path=':reconDate&:templateId' component={JobDetailPage}/>
                    </Route>
                <Route name='report' path='report' component={ReportPanel}/>
            </Route>
            <Route path='*' component={NotFoundPage}/>
        </Router>
    <div>

这就是我目前拥有的（react-router 4.x）：

import { Router, Route, Switch} from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory'
const customHistory = createBrowserHistory()
render(){
    return (
        <div>
            <Router history={customHistory}>
                <div>
                    <Route name='home' path={'/'+contextName} component={LandingPage}/>
                    <Switch>
                        <Route name='templates' path={'/'+contextName + 'templates'} component={JobPage}/>
                        <Switch>
                            <Route path={'/'+contextName + 'templates/:reconDate&:templateId'} component={JobDetailPage}/>
                        </Switch>
                        <Route name='report' path={'/'+contextName + 'report'} component={ReportPanel}/>
                        <Route path='*' component={NotFoundPage}/>
                    </Switch>
                </div>
            </Router>
        </div>

有人可以帮忙吗？这不是我的主要问题，但是我从主要问题中撕下了头发，我认为值得升级React-Router并查看是否更容易处理我的异步问题（未显示）是值得一试的为简单起见）

所以唯一的路径是：

/compare (contextName = 'compare')
/compare/templates
/compare/templates/:reconDate&:templateId
/compare/report

其他任何东西都会给出notfoundpage

Answer 1

请使用BrowserRouter，而您不需要history={customHistory}。核心反应路由器切换到使用react-router-dom。

https://codeburst.io/reaeact-router-v4-unofficial-migration-guide-5A370B8905A