React Router Dom点击首页按钮跳转后页面嵌套及白屏问题求助

问题根源&修复方案 #

你遇到的两个问题都来源于Home.js的冗余路由配置，直接按以下步骤修改即可：

1. 核心错误点 #

• 整个React应用仅需要在最顶层（也就是你已经写了的App.js中）声明一次BrowserRouter即可，Home.js里重复嵌套的Router会和顶层路由上下文隔离，导致首页的Link跳转仅能触发Home内部的路由匹配，所以跳转后Jumbotron（头部 banner区域）仍然保留，目标页面直接嵌套在下方显示。
• Home.js里重复定义的子路由和App.js的全局路由冲突，你给根路径路由加exact后触发了匹配逻辑冲突，才会出现白屏问题。

2. 修复代码 #

直接替换Home.js的全部内容即可：

import React from 'react'
import Jumbotron from '../components/Jumbotron'

const Home = () => {
  return (
    <div>
      <Jumbotron />
    </div>
  )
}

export default Home

修改后App.js里的<Route exact path="/" component={ Home }/>配置可以正常生效，点击首页跳转按钮后会直接走App.js的全局路由匹配，目标页面会替换整个Home内容，不会再出现嵌套问题。

补充说明 #

如果你希望所有页面都显示Jumbotron区域，只需要把<Jumbotron />从Home.js移到App.js中<Menu />的下方、<Switch>的上方即可，不需要保留Home里的冗余路由。

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