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>

1
2
3
4
5
6
7
8
9
10

问题：展示不出来

解决：在父组件使用 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@蚵仔煎-20231027

上次更新: 10/27/2023, 4:16:54 PM

← react路由严格模式问题 GIT 遇到问题→