React嵌套路由访问/employee/create同时显示列表和表单如何解决

问题原因 #

React Router 默认采用包容性匹配规则，未加独占匹配包裹时，所有匹配到路径规则的路由组件都会同时渲染。你当前代码缺少路由独占匹配的逻辑，导致访问/employee/create时触发了多个组件渲染。

解决方案 #

方案1：适配React Router v5版本 #

用<Switch>组件包裹所有路由，<Switch>会保证仅渲染第一个匹配到的路由组件。
首先在文件头部引入Switch组件：

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

修改render内的代码如下：

render() {
    return (
        <Layout>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route path='/counter' component={Counter} />
                <AuthorizeRoute path='/fetch-data' component={FetchData} />
                <Route exact path='/employee' component={EmployeeIndex} />
                <Route path='/employee/create' component={EmployeeCreate} />
                <Route path='/employee/details/:id' component={EmployeeDetails} />
            </Switch>
        </Layout>
    );
 }

注意路由排列顺序，更具体的路径（如/employee/create）要放在相对模糊的路径（如带参数的/employee/:id）前面，避免先匹配到模糊规则跳过精确规则。

方案2：适配React Router v6版本 #

v6版本废弃了Switch组件，替换为<Routes>，且默认开启精确匹配，写法调整如下：
首先引入相关组件：

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

修改路由代码：

render() {
    return (
        <Layout>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/counter' element={<Counter />} />
                <AuthorizeRoute path='/fetch-data' element={<FetchData />} />
                <Route path='/employee' element={<EmployeeIndex />} />
                <Route path='/employee/create' element={<EmployeeCreate />} />
                <Route path='/employee/details/:id' element={<EmployeeDetails />} />
            </Routes>
        </Layout>
    );
 }

调整后访问/employee/create就只会渲染员工创建表单组件。

内容的提问来源于stack exchange，提问作者Adn