해시 라우터 뒤로 버튼과 같이 설정에 내 앱을 라우터 V4

Question

내가 사용 HashRouter 반응 :

import {HashRouter as Router, Route, Switch, Link} from 'react-router-dom'; 

const Routing =() => (
    <Router> 
    <div> 
    <Route exact path ="/" component = {App} /> 
    <Route path ="/about" component = {About} /> 
    </div> 
    </Router> 
) 

그것은 잘 작동하지만이 링크를 클릭 할 때/약으로 이동 한 다음 다시 칠 버튼 아무 일도 일어나지 않습니다. 인터넷 브라우저의 뒤로 버튼으로 이전 페이지로 돌아갈 수 있도록하려면 어떻게해야합니까? 앱은 차이를 만드는 경우 create-react-app를 사용하여 빌드됩니다.

Answer 1

사용 Switch

스위치는 독점적 경로를 렌더링 점에서 독특하다. 대조적으로 에서는 위치와 일치하는 모든 경로가 포괄적으로 렌더링됩니다.

즉, 모든 경로가 일치하기 때문에 모든 경로가 렌더링되고 있음을 의미합니다.

URL이 약/about 인 경우 About, User 및 NoMatch가 모두 경로와 일치하므로 모두 이 렌더링됩니다. 이것은 우리가 있다면 우리 가 지금 등 사이드 바 및 빵 부스러기, 부트 스트랩 탭과 같은 여러 가지 방법으로 우리의 애플 리케이션에

을 경로를 구성 할 수 있도록 디자인입니다/약, 스위치는 일치를 찾기 시작합니다 경로. 경로 경로 = "/에 대해"이 일치하고 스위치는 일치를 찾고 을 중지하고 그래서`Router`는`HashRouter` 구성 요소에서이 약

귀하의 코드는 다음과

import {HashRouter as Router, Route, Switch, Link} from 'react-router-dom'; 

const Routing =() => (
    <Router> 
    <Switch> 
     <Route exact path ="/" component = {App} /> 
     <Route path ="/about" component = {About} /> 
    </Switch> 
    </Router> 
)