반응 라우터는 항상 '/'경로를 렌더링합니다.

Question

저는 반응 라우터를 사용하려고하는데, 라우터는 항상 초기 경로 ('/')를 렌더링합니다. 내가/#/계정을 렌더링 할 때 내가

react: ^16.2.0

react-dom: ^16.2.0

react-router-dom: ^4.2.2

을 사용하고, 대신 계정의 홈을 렌더링합니다.

import {Switch} from 'react-router-dom'; 

을하고 포장이 주위에 얻을 수있는 방법

import React from "react" 
 
import ReactDOM from "react-dom" 
 
import { BrowserRouter as Router, Route } from 'react-router-dom' 
 

 
import Home from "./components/Home/Home"; 
 
import Account from "./components/Account/Account"; 
 
import Layout from "./components/Layout"; 
 

 
const app = document.getElementById('app'); 
 

 
ReactDOM.render(
 
    <Router> 
 
     <div> 
 
     <Route exact path="/" render={() => (<div>Home</div>)} /> 
 
     <Route path="/account" render={() => (<div>Account</div>)} /> 
 
     </div> 
 
    </Router>, 
 
    app 
 
)

Answer 1

하나는 반응 라우터-DOM에서 <Switch> 사용하는 것이다, 당신은 그것을 좋아 가져올 수 있습니다 내 <Route> 내부에 <Switch> 나는 그 좋은 생각을 넣어 마지막에 "/"을 넣어 기본 구성 요소도 같이 줄 수 있습니다 :

<Router> 
     <div> 
     <Switch> 
      <Route path="/account" render={() => (<div>Account</div>)} /> 
      <Route exact path="/" render={() => (<div>Home</div>)} /> 
      <Route component={NoMatch}/> 
     </Switch> 
    </div> 
    </Router> 

내가이 방법, 행운을 시도했다 더 Here