reactjs - React Router 4 组织路由

Question

我目前正在尝试使用 Router 4 在我的第一个 React 应用程序中组织路由。目标是打开(显示)一些组件，其中导航栏保留在页面上，而另一些则没有导航栏。我一开始的想法是让所有组件显示在导航栏容器下，它工作得很好，但现在我需要添加一些链接，在同一窗口中打开链接的组件，但没有导航栏。也许有人知道如何设置这样的路由。

我当前的代码:

 render() {

    return (
     <BrowserRouter>      
      <div className="App">   
        <div className="App-header">
        <h2>{this.state.title}</h2>
        <NavBar></NavBar>
        </div>
            <Switch>
              <Route exact path = "/" component = {Home} />
              <Route exact path = "/about" component = {About} />
              <Route exact path = "/register" component = {RegForm} />
            </Switch>    
       <footer className = "Footer"><Content /></footer>
       </div>
     </BrowserRouter>
    );

  }

Answer 1

您需要将路线拆分为 Main将有导航的部分和没有导航的部分:

render() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/page-outside-nav" component={OutsideNav} />
                <Route path="/" component={Main} />
            </Switch>
        </BrowserRouter>
    );
}

const Main = () => (
    <div className="App">
        <div className="App-header">
            <h2>{this.state.title}</h2>
            <NavBar></NavBar>
        </div>
        <Switch>
            <Route exact path = "/" component = {Home} />
            <Route exact path = "/about" component = {About} />
            <Route exact path = "/register" component = {RegForm} />
        </Switch>
        <footer className = "Footer"><Content /></footer>
    </div>
);

主开关 App将首先尝试匹配应该存在于导航之外的路线。如果没有找到匹配，它将通过匹配<Route path="/" component={Main} />进入main。 。 Main那么应该有它自己的Switch处理导航下应存在的路线。