react router嵌套路由不生效

react router嵌套路由不生效

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

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

 <div className='content'>
          <Routes>
            <Route path='/' element={<Navigate to="/home" />} />
            <Route path='/home' element={<Home />}>
              <Route path='/home' element={<Navigate to="/home/recommend" />} />
              <Route path='/home/recommend' element={<HomeRecommend />} />
            </Route>
          </Routes>
          <h1>content</h1>
        </div>

问题：展示不出来

解决：在父组件使用 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 (
      <div style={{ 'borderTop': '1px solid black' }}>
        <h2>Home Counter: {counter}</h2>
        <Outlet />
      </div>
    )
  }
}

export default Home

@蚵仔煎-20231027