Javascript React路由器v4-页面组成

以下是我想要实现的：

在

/event

和

/customercenter

的情况下，将显示

页眉和
页脚
，并且仅更改
主
标记的内容

另一方面，
/login
和
/register
页面不显示页眉和页脚

首先，我的网站的页面组成如下

/

--/event

--/customercenter

/登录

/登记册

我似乎没有解决问题，因为我认为我误解了匹配

当进入
/event
页面时，
/
基本上是匹配的，所以我认为应该绘制在
/
中呈现的组件

因此，
/
、
/login
和
/register
使用
switch
和
exact
进行分支，在
//code>下呈现的页面只需以
的形式进行配置，您可以将“/”路径移动到列表底部，并从路由中删除exact

因此，如果“/login”和“/register”不匹配，则“/”将匹配：

<Switch>
  <Route path="/login" component={Login} />
  <Route path="/register" component={Register} />
  <Route path="/" component={Home}/>
</Switch>



您的“/event”和“/customercenter”路线也将匹配“/”，因为它没有设置为精确的匹配。
谢谢您的回答，但这是我已经尝试过的。如果我这样做，
/login
和
/register
会正确呈现，但
/event
和
/customercenter
不会正确呈现。您可以将“/”路由移动到底部并删除。这样，中的其他路线将首先匹配。这很有效！我甚至不认为这是一个秩序问题。伟大的
class App extends Component {
  render() {
    return (
      <Switch>
        <Route path="/" component={Home}/>
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
      </Switch>
    );
  }
}

class Home extends Component {
    render() {
        return (
          <div className="App">
            <MainHeader />
            <AwesomeRouter />
            <Footer/>
          </div>
        );
    }
}

class AwesomeRouter extends Component {
    render() {
        return (
            <div>
              <Route path='/event' component={Event}/>
              <Route path='/customercenter' component={CustomerCenter}/>
            </div>
        );
    }
}

<Switch>
  <Route path="/login" component={Login} />
  <Route path="/register" component={Register} />
  <Route path="/" component={Home}/>
</Switch>