react-router 如何实现 vue-router 中 router-view 的功能

Question

页面路由切换的时候，只有部分组件重新渲染，在 vue-router 中，可以通过 router-view 实现，
想问下在 react-router 中怎么实现。

Answer 1

首先，版本是3还是4.

下面说下3的做法。

3里面route是可以嵌套的，如下

<route component={A}>
    <route path="/A/B" component={B}/>
    <route path="/A/C" component={C}/>
</route>

而A组件的写法通常如下

class A extends React.Component {
    render(){
        return (
            <div>{this.props.children}</div>
        )
    }
}

这里的children在不同路由下对应不同组件，即/A/C对应C组件，/A/B对应B组件。

也就是说，要变化的写在B、C组件内，不变化的写在A组件内。

Answer 2

正好搜索到这个解决方案，发现变化了很多，我补充一下

3 的写法为 如上那种，且 在组件中定义 <div>{this.props.children}</div>

4 为

<route element={<A />}>

<route path="/A/B" element={<B />}/>
<route path="/A/C" element={<C />}/>

</route>

且 需要在 A组件中

import { Outlet } from 'react-router-dom';
...
<div>

我是A组件
<Outlet />

</div>
...

来源：https://reactrouter.com/docs/...