React Router v4路由异常：点击侧边栏后页面组件全部消失

嘿，我来帮你搞定这个React Router v4的问题！核心原因是路由嵌套的匹配逻辑没捋清楚，导致点击侧边栏跳转后，App组件根本没被渲染，Header、Sidebar这些自然就消失了。咱们一步步拆解：

1. 核心问题所在 #

先看你的Root组件里的路由配置：

<Route exact path="/" component={LoginPage} />
<Route exact path="/app" component={App} />

这里给/app加了exact属性，意思是只有当URL完全等于/app时，才会渲染App组件。而你的侧边栏跳转的是/trivia和/image，这两个路径和/app完全不匹配，所以Root里没有任何Route会渲染App，Header、Sidebar自然就不见了。

另外，你后来尝试在App里加<BrowserRouter>也是错误的——整个应用只需要一个Router实例（就是你最外层的<ConnectedRouter>），多个Router会导致路由上下文混乱，反而出问题。

2. 解决方案：两种嵌套路由的正确写法 #

方案一：给子路由加上/app前缀（推荐，结构更清晰） #

这种方式让App作为/app路径下的父组件，所有子页面都嵌套在/app下：

步骤1：修改Root组件的App路由，去掉exact

// Root/index.js
import { Switch, Route } from 'react-router-dom'

class Root extends Component {
  render () {
    return (
      <div>
        <main>
          <Switch> {/* 用Switch确保只匹配第一个符合条件的路由 */}
            <Route exact path="/" component={LoginPage} />
            <Route path="/app" component={App} /> {/* 去掉exact，匹配所有/app开头的路径 */}
          </Switch>
        </main>
      </div>
    )
  }
}

步骤2：修改侧边栏的跳转路径

把/trivia和/image改成/app/trivia和/app/image：

// MenuPanel/index.js
const mapDispatchToProps = dispatch => bindActionCreators({
  toTriviaPage: () => push('/app/trivia'),
  toImagePage: () => push('/app/image')
}, dispatch)

步骤3：修改App组件里的子路由

现在App里的Route要对应/app下的子路径，同时加上默认渲染（当路径是/app时显示TriviaPanel）：

// App.js
import { Switch, Route } from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <Sidebar/>
        <div>
          <main>
            <Switch> {/* 用Switch确保同一时间只渲染一个Panel */}
              <Route exact path="/app/trivia" component={TriviaPanel} />
              <Route exact path="/app/image" component={ImagePanel} />
              <Route exact path="/app" component={TriviaPanel} /> {/* 默认显示TriviaPanel */}
            </Switch>
          </main>
        </div>
      </div>
    );
  }
}

方案二：不使用/app前缀，让App作为所有非登录页的父组件 #

如果你不想加/app前缀，也可以让App匹配除了登录页（/）之外的所有路径：

步骤1：修改Root组件的路由

用Switch包裹，把App的路由放在最后，不限制exact：

// Root/index.js
import { Switch, Route } from 'react-router-dom'

class Root extends Component {
  render () {
    return (
      <div>
        <main>
          <Switch>
            <Route exact path="/" component={LoginPage} />
            <Route path="/" component={App} /> {/* 匹配所有非/的路径 */}
          </Switch>
        </main>
      </div>
    )
  }
}

步骤2：保持侧边栏的跳转路径不变（还是/trivia和/image）

// MenuPanel/index.js
const mapDispatchToProps = dispatch => bindActionCreators({
  toTriviaPage: () => push('/trivia'),
  toImagePage: () => push('/image')
}, dispatch)

步骤3：修改App组件里的子路由

直接匹配/trivia和/image，加上默认渲染：

// App.js
import { Switch, Route } from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <Sidebar/>
        <div>
          <main>
            <Switch>
              <Route exact path="/trivia" component={TriviaPanel} />
              <Route exact path="/image" component={ImagePanel} />
              <Route component={TriviaPanel} /> {/* 默认显示TriviaPanel */}
            </Switch>
          </main>
        </div>
      </div>
    );
  }
}

3. 关键知识点回顾（React Router v4） #

• 路由是组件：嵌套路由就是在父组件中编写子Route，父Route必须能匹配到子Route的路径（要么父Route路径是子路径的前缀，要么父Route不限制exact）。
• Switch组件：用来确保同一时间只渲染第一个匹配的Route，避免多个Route同时渲染（比如你之前App里没加Switch，会同时渲染默认的TriviaPanel和匹配的Panel）。
• 不要嵌套多个Router：整个应用只需要一个Router实例（比如你的<ConnectedRouter>），多个Router会导致路由状态混乱。

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