如何在React页面中同时显示Navbar与TextEditor两个组件

问题原因 #

• 核心错误是你将需要全局展示的Navbar放在了Switch组件内部：Switch组件的特性是仅会渲染第一个和当前访问路径匹配的Route/Redirect组件，其余子内容都会被忽略。当你访问/documents/:id路径时，Switch只会匹配到TextEditor对应的Route，因此Navbar不会被渲染。
• 根路径的路由配置重复：你同时写了两个exact path="/"的规则，第一个匹配到Navbar组件后，后续的重定向逻辑会直接失效，也不符合你跳转至编辑器页的需求。
• TextEditor的路由配置冗余：同时使用component属性和子元素声明渲染组件，属于重复配置，二者选其一即可。

修复方案 #

把Navbar移到Switch组件外部，确保所有路径下都会渲染导航栏，同时修正冗余的路由配置，修改后的代码如下：

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          {/* 把Navbar移到Switch外面，所有页面都显示 */}
          <Navbar bg="light" expand="sm"/>
          <Switch>
            {/* 根路径直接重定向到编辑器页 */}
            <Route path="/" exact> 
              <Redirect to={`/documents/${uuidV4()}`} />
            </Route>
            {/* 编辑器路由，删掉重复的组件声明 */}
            <Route path="/documents/:id" component={TextEditor} />
          </Switch>
        </div>
      </Router>
    )
  }
}

如果不需要全局展示Navbar，只需要在编辑器页展示，就把Navbar放在TextEditor的Route内部即可，不需要单独配根路径的Navbar路由。

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