react router嵌套路由不生效

react router嵌套路由不生效

今天遇到了react router嵌套路由不生效的问题，上代码：

App.jsx 文件，想路径为 /home/recommend 展示 HomeRecommend 组件

 

          
            } />
            }>
              } />
              } />
            
          
          
content
        

问题：展示不出来

解决：在父组件使用 Outlet 占位

Home.jsx 文件

import React, { PureComponent } from 'react'
import { Outlet } from 'react-router-dom'

export class Home extends PureComponent {
  render() {
    const { counter } = this.props

    return (
      

        
Home Counter: {counter}
        
      
    )
  }
}

export default Home

@蚵仔煎-20231027