React Router v4 - 页面组成

Question

以下是我要实施的内容：

如果是/event和/customercenter，则会显示header和footer，并且只会更改main标记的内容。

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

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

  

/
   - /事件
   - / customercenter
  /登录
  /注册

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

当一个人进入/event页面时， /基本上是匹配，所以我认为将绘制/中呈现的组件。

所以/，/login和/register使用switch和exact进行分支，而/下要呈现的页面只是以<Route path = {...} component = {...}。

的形式配置

为了实现这一点，我试图通过引用堆栈溢出中的其他文章来实现它，但由于某种原因，路由器无法捕获来自/register和/login的组件（而是返回{ {1}}）。

简而言之：

• 预期结果：null和/login
上没有页眉和页脚
• 当前结果：/register和/login没有与页眉和页脚匹配的compoennt。

以下是我的简化代码：

index.js

/register

App.js

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

要使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我使用/。但它并不匹配任何东西。

Home.js

exact

router.js

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

Answer 1

您可以移动＆＃39; /＆＃39;到列表底部的路径，并从路线中删除完全。

因此，如果＆＃39; / login＆＃39;和＆＃39; /注册＆＃39;不匹配，然后＆＃39; /＆＃39;将匹配：

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

您的＆＃39; / event＆＃39;和＆＃39; / customercenter＆＃39;然后路线也会匹配＆＃39; /＆＃39;因为它没有设置为完全匹配。