将React-Router V3更改为React-Router V4

Samuel 发表于 Dev

塞缪尔

我从react-router c3迁移到react-router v4有问题。我不知道如何正确配置它。

我正在导入此：

import { Route, IndexRoute} from 'react-router';
import { BrowserRouter } from "react-router-dom";

然后我在渲染器中设置路由器：

        <BrowserRouter>
            <Route path="/" component={Template}>
                <IndexRoute component={HomePage}></IndexRoute>
                <Route path="/contact" component={Contact}></Route>
            </Route>
        </BrowserRouter>

但是仅显示模板组件。

Shubham Khatri

您没有嵌套或Routes或IndexRouteand react-router v4，而是可以在组件本身中编写嵌套的Routes，路由器配置看起来像

 <BrowserRouter>
     <Route path="/" component={Template} />
 </BrowserRouter>

并在Template.js中

import { Switch, Route } from 'react-router-dom';

render() {
    <div>
        {/* other content */}
        <Switch>
             <Route path="/contact" component={Contact} />
             <Route component={HomePage} />
        </Switch>
    </div>

}

甲Route without a path充当IndexRoute或缺省路由，而且开关将呈现第一匹配的路由，因此，如果/contact被渲染，HomePage将不被呈现

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。