React Router v5子路由组件不渲染问题求助（React 16）

问题描述 #

基于React 16开发的仪表盘应用，使用react-router-dom v5.3.0实现路由。侧边栏点击「Dashboard」和「Antrian Pasien」可正常渲染对应页面，但点击「Antrian Pasien」内的「Ke Form」链接后，Forms组件无法渲染，无法实现内容区域的路由切换。

核心问题分析 #

1. 重复嵌套Router实例：index.js已通过<Router>包裹整个应用，App.js内再次嵌套<Router>导致路由上下文隔离，导航行为无法同步。
2. Route组件属性使用错误：使用children属性渲染组件，该属性在react-router-dom v5中无论路径是否匹配都会触发渲染，而非仅匹配时渲染。
3. 路由匹配顺序冲突：父路由/antrian-pasien未设置exact，当访问子路由/antrian-pasien/form-antrian-pasien-baru时，Switch会优先匹配父路由，跳过子路由匹配。

解决方案步骤 #

1. 移除App.js中的重复Router #

删除App.js外层的<Router>标签，保留index.js中的全局Router上下文即可。

2. 修正Route的渲染方式 #

将children={<route.main/>}替换为render={route.main}，确保仅当路径匹配时才渲染目标组件。

3. 调整父路由的匹配规则 #

给/antrian-pasien路由添加exact: true，避免父路由匹配子路由路径，保证Switch能正确匹配到子路由的Forms组件。

修改后的关键代码 #

App.js 路由数组修改

const routes = [
    {
        path: '/',
        exact: true,
        sidebar: () => <div>Dashboard</div>,
        main: () => (
            <>
                <Dashboard/>
            </>
        )
    },
    {
        path: '/antrian-pasien',
        exact: true, // 添加exact确保仅匹配精确路径
        sidebar: () => <div>Antrian Pasien</div>,
        main: () => 
                <>
                    <Registration/>
                </>
    },
    {
        path: '/antrian-pasien/form-antrian-pasien-baru',
        exact: true,
        sidebar: null,
        main: () => <> <Forms/> </>
    }
]

App.js 组件渲染部分修改

const App = () => {
   return (
    <>
            <Wrapper>
                <div style={{fontSize: '10px'}}>
                    <SidebarNav>
                    <LogoIcon>
                    <img src={ImgLogo} alt="Gambar Logo Siklus Care"></img>
                    </LogoIcon>

                    <SidebarWrap>
                        <ul>
                            <li>
                                <Link to="/">Dashboard</Link>
                            </li>
                            <li>
                                <Link to="/antrian-pasien">Antrian Pasien</Link>
                            </li>
                        </ul>
                    </SidebarWrap>
                    </SidebarNav>
                </div>
                <ContentWrapper>
                        <Content>
                            <NavigationBar/>
                                <Switch> 
                                    {
                                        routes.filter(({ main }) => !!main)
                                        .map((route, index) => (
                                            <Route 
                                                key={index} 
                                                path={route.path} 
                                                exact={route.exact} 
                                                render={route.main} // 使用render属性替代children
                                            />
                                        ))
                                    }    
                                </Switch>     
                        </Content>
                    </ContentWrapper>
            </Wrapper>
    </>
   )
}

验证修改效果 #

完成上述修改后，点击「Ke Form」链接，路由会切换到/antrian-pasien/form-antrian-pasien-baru，Forms组件将正常渲染在内容区域。

内容的提问来源于stack exchange，提问作者github.arief