Question

我目前正在尝试使用路由器4在我的第一个React应用程序中组织路由。目标是打开（显示）一些组件，其中Navbar保留在页面上，而一些组件没有Navbar。我开始想把所有组件显示在NavBar容器下，它工作正常，但现在我需要添加一些链接，在同一个窗口中打开链接的组件，但没有Navbar。也许有人知道如何设置这样的路由。

我目前的代码：

 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来处理导航下应该存在的路由。

React Router 4组织路由

1 个答案: