react-router-dom 怎么做到像tab选项卡那样呢？

Question

https://ant.design/components...
就像最后一个例子一样

react-router-dom 能做到不替换当前页而只是打开一个新增页面的效果么??
有哪位大牛能提供点思路么

Answer 1

你这里的概念有些混淆。
首先，react-router作用于单页面应用，route的变化并不是真正的HTML页面的替换，而只是渲染的内容的不同，从这一点上来看，通过route改变内容和通过tab改变内容，本质上是一样的。
其次，你可以用react-router的Link去包裹tab组件，这样点击tab就可以导航到Link对应的路由，相应路由（Route）组件中的component会被渲染，从而改变页面内容，但是这也会导致浏览器URL的变化。毕竟react-router是以URL的变化为触发内容改变的起点的，这一点是和tab切换不同的。

Answer 2

为什么不直接用他的tab组件呢

Answer 3

可以，比如像下面这样写

<BrowserRouter>
    <div>
        <Component />
        <Switch>
            <Route path="/login" component={App}></Route>
            <Route path="/dashboard" component={Dashboard}></Route>
            <Redirect to="/login"></Redirect>
        </Switch>
    </div>
</BrowserRouter>

只要Route的组件不是占据整个Router其实就可以实现你的效果，当然你也可以使用路由嵌套，路由嵌套也可以实现你要的效果,只是这样会出现二级路由，还是要看你的使用场景。我这里用的BrowserRouter容易出些问题，建议你用HashRouter