React Router v4 - 页面组合

Question

这是我要实现的：

在/event和/customercenter的情况下，显示header和footer，只有main标签的内容发生变化。

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

首先我网站的页面构成如下

/
-- /event
-- /customercenter
/login
/register

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

当进入/event页面时， / 基本上是匹配的，所以我认为 / 中渲染的组件会被绘制。

所以/、/login和/register使用switch和exact进行分支，/下要渲染的页面简单配置成<Route path = {...} component = {...}.

的形式

为了实现这一点，我尝试参考堆栈溢出中的其他文章来实现它，但由于某种原因，路由器无法捕获来自 /register 和 /login 的组件（而是它returns null）。

简而言之：

预期结果：/login 和 /register
当前结果：/login 和 /register 没有与页眉和页脚匹配的组件。

以下是我的简化代码：

index.js

ReactDOM.render(
    <Router>
        <App />
    </Router>
, document.getElementById('root'));

App.js

class App extends Component {
  render() {
    return (
      <Switch>
        <Route path="/" component={Home}/>
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
      </Switch>
    );
  }
}

为了使 /login 和 /register 避免匹配 / 我使用了 exact。但是它没有匹配到任何东西。

Home.js

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

router.js

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

Answer 1

您可以将“/”路径移至列表底部，并从路由中删除 exact。

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

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

您的“/event”和“/customercenter”路由也将匹配“/”，因为它未设置为精确匹配。

React Router v4 - 页面组合

React Router v4 - page composition

javascript

reactjs

react-router-v4

index.js

App.js

Home.js

router.js