陣營路由器V4 - 頁組合

Question

這裏是我想要實現的東西：

在/event和/customercenter的header和footer的情況顯示，只有main標籤的內容被改變。

另一方面，/login和/register頁面不顯示頁眉和頁腳。

首先，我的網站的頁面組成如下。

/
- /事件
-/customercenter
/登錄
/註冊

我似乎沒有要解決這個問題，因爲我覺得我誤解匹配。

當一個人進入/event頁面， /基本上是比賽，所以我認爲，在/呈現的部分將被繪製。

所以/，/login和/register使用switch和exact支鏈的，和/下要呈現的網頁中的<Route path = {...} component = {...}形式被簡單地構成。爲了實現這一點，我試圖通過引用堆棧溢出中的其他文章來實現它，但出於某種原因，路由器無法捕獲來自/register和/login（而不是它返回null）的組件。

簡而言之：

• 預期的結果：無頁眉和頁腳上/login和/register
• 當前結果：/login和/register與頁眉和頁腳中沒有匹配compoennt。

以下是我的簡化代碼：

---

index.js

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

---

App.js

爲了/login和/register避免匹配/我用exact。但它不匹配任何東西。

---

首頁。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

您可以在 '/' 路徑移動到列表的底部，並從路線中刪除確切。

因此，如果 '/登錄' 和 '/註冊' 不匹配，那麼 '/' 將匹配：

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

你 '/事件' 和 '/ customercenter' 路線然後將也匹配'/'，因爲它沒有設置爲確切匹配。