는 라우터 V4 반응 - 페이지 구성 여기

Question

내가 구현하려는 것입니다 : 도시와 main 태그의 내용이 변경 /event 및 /customercenter의 header 및 footer의 경우

.

반면에 /login 및 /register 페이지에는 머리글과 바닥 글이 표시되지 않습니다.

먼저 내 웹 사이트의 페이지 구성은 다음과 같습니다.

/
-/이벤트
-/customercenter
/로그인
/내가 일치를 오해하고 생각하기 때문에 나는이 문제를 해결해야하지 않는 것

등록 .

하나는 /event 페이지를 입력

, /는 기본적으로 일치하는, 그래서는 /에서 렌더링 구성 요소가 그려 질 것이라고 생각했다.

/ 그래서, /login 및 /register는 switch 및 exact을 사용하여 지형 및 / 따라 렌더링 될 페이지는 단순히 <Route path = {...} component = {...}의 형태로 구성된다.

이를 구현하기 위해

, 나는 스택 오버 플로우의 다른 기사를 참조하여 구현하는 것을 시도했다, 그러나 어떤 이유로 라우터는 /register 및 /login (대신이 null을 반환)에서 구성 요소를 잡을 수 없습니다. 요컨대

:

• 예상되는 결과 : 헤더 및 풋터와 일치 compoennt와 /login 및 /register : 헤더 또는 푸터 /login 및 /register
• 현재 결과에.

다음은 내 간단한 코드입니다 :

만들려면

---

하는 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'경로는 다음도 일치합니다 '/'는 exact과 일치하지 않으므로