리액터 라우터가 제대로 작동하지 않습니다.

Question

react Router v2에서 v4으로 업그레이드 한 다음 모든 것이 망가졌습니다! Google에서 오류를 검색하고 반응 라우터의 최신 버전이 완전히 다시 작성되었음을 알게되었습니다. 내 애플 리케이션을 업데이 트에 대한 문서를 따라하려했습니다. 그러나 공식 문서에서 코드를 복사하고 완벽하게 작동하지만 내 구성 요소와 구조로 작업 할 때 라우팅되지 않습니다. 나는 실제 문제를 파악할 수 없었다. 모든 것이 정상적으로 보이지만 여전히 라우팅되지 않습니다.

업데이트가 나는 문제를 파악했다. 구성 요소를 Route에서 렌더링하는 것이 었습니다. 내 코드에서 Component을 사용했지만이어야하므로 내 코드가 작동하지 않습니다. 이벤트가 오류를 발생시키지 않았습니다!

아래에이 코드하는

import React from 'react'; 
import { render } from 'react-dom'; 

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

const About =() => (
    <div>About page</div> 
) 
const Home =() => (
<div>Home component</div> 
) 
const AppComponent =() => (
<div>App component is rendered as well</div> 
) 

render(
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/contact">Contact</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route exact path="/" component={AppComponent}/> 
     <Route path="/about" component={About}/> 
    </div> 
    </Router>, 
    document.querySelector('#app') 
) 

아래에이 코드를 라우팅을위한 노력은 루트

import React from 'react'; 
import { render } from 'react-dom'; 

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

const SignUp =() => (
    <div>This is Sign up Page</div> 
) 
const Home =() => (
<div>Home component</div> 
) 
const AppComponent =() => (
<div>App component is rendered as well</div> 
) 

render(
    <Router> 
    <div className="container"> 
     <nav className="navbar navbar-default"> 
      <div className="container-fluid"> 
      <div className="navbar-header"> 
       <Link to="/" className="navbar-brand">Red Dice</Link> 
      </div> 

      <div className="collapse navbar-collapse"> 
       <ul className="nav navbar-nav navbar-right"> 
       <li><Link to="/signup">Sign up</Link></li> 
       </ul> 
      </div> 
      </div> 
     </nav> 

    <Route exact path="/" Component={Home} /> 
    <Route exact path="/" Component={AppComponent} /> 
    <Route path="/signup" Component={SignUp} /> 
    </div> 

</Router>, 
    document.querySelector('#app') 
) 

나는 또 다른 질문에 대한 browserHistory이 작동하지 않습니다. 이전 버전에서 우리는 그것을 가지고 있었지만 최신 버전에서는 라우터가 이것을 제공하지 않습니다. 그렇다면 browserHistory를 사용하기 위해 새로운 버전에서 사용할 수있는 것은 무엇입니까?

최신 버전에서

Answer 1

, 당신은 browserHistory 옵션을 대체 할 BrowserRouter을 사용해야합니다

이

import { BrowserRouter } from 'react-router-dom' 

<BrowserRouter> 
    <div> ... </div> 
    <Route /> 
    <Route /> 
</BrowserRouter> 

당신은 https://reacttraining.com/web/api/BrowserRouter