반응 라우터 url 을 변경하지만 보기

나는 데 문제가 변경하에서 보기 반응과 라우팅이라고 합니다. 그것은 보인다가 모든 것을 내가할 수 있는 구글이 없는 행운입니다. 나만 보여주고 싶은 사용자의 목록을 클릭하면 각 사용자를 탐색하면 정보 페이지로 이동합니다. 여기에는 이 라우터:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

를 사용하고 있는 경우는 url/세 나라로 이동하는 url,하지만 변하지 않습니다. 다른 어떤 경로 발생 404 그래서 그것을 인식하고있지만 업데이트합니다.

프로그래밍
reactjs react-router
11일 4월 2017 в 4:42
아직 보기가 없습니다.
질문에 대한 의견 (4)

를 지정해야 합 특성정확한에 대한 귀하의 indexRoute,그렇지 않으면도/정보로 그것은 여전히 일치/. 또한을 가져오려고 하경로에서반응 라우터-dom

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((

    <div>


    </div>

), document.getElementById('app'))

업데이트:

다른 일을 할 필요가 있는가를 연결하는 구성요소와 사용자는withRouter. 당신의 사용을 만들 필요가withRouter하는 경우에만 구성 요소를 받지라우터 소품,

이러한 현상이 발생할 수 있습 경우에 당신의 구성 요소입중첩 아동의 구성 요소 렌더링에 대패나you haven't 통과 라우터 소품을는 경우 또는 구성요소가 연결되지 않 라우터에서 모든 프로그램 또는 공급업체에 독립적인 별도의 구성요소에서 노선이 있습니다.

에 Users.js 추가

import {withRouter} from 'react-router';

.........
export default withRouter(Users)

문서

johndodo
편집된 답변23일 6월 2019 в 7:17
해설 (5)

당신을 감싸는 내부 구성품withRouter. <경로 정확한 path="/mypath"component={withRouter(MyComponent)}/> 샘플은 다음과 같습니다 App.js 파일:

...
import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

class App extends Component {
  render() {
    return (






    );
  }
}

export default App;

추가

사용하는 경우에는 반응 라우터,componentWillReceiveProps을 얻을 것이 라고 할 때마다 url 을 변경합니다.

componentWillReceiveProps(nextProps) {
    var currentProductId = nextProps.match.params.productId;
    var nextProductId = nextProps.match.params.productId; // from the new url
    ...
}

Note

또는,당신은 또한 포장에 구성품withRouter내보내기 전에,하지만 당신을 위해 몇 가지 다른 것들입니다. 나는 일반적으로 건너뛰기 단계입니다.

export default withRouter(Profile)
Coding Elements
편집된 답변26일 11월 2019 в 9:41
해설 (4)

을 사용할 때는 돌아오는하고<링크>나와 유사한 문제는 url 업데이트 주소 표시줄에서하지만 응용 프로그램을 로드하지 않는 각각의 구성 요소입니다. 를 해결할 수 있었을 추가하여 withRouter 내보내기:

import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

export default withRouter(connect(mapStateToProps)(MyComponentName))
해설 (0)

당신이 필요해 추가 정확한 색인 경로를 보다는 오히려 바깥쪽 그Route부품에 의해 div,사용모에서 반응 라우터 dom 사이를 전환합니다.

import React from "react";
import ReactDOM from "react-dom";
import { Route, Switch } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((
  <div>




  </div>
), document.getElementById('app'))
해설 (1)

나는 유사한 문제에 반응 라우터 버전 4:

를 클릭하여<링크/>구성 요소,URL 을 변경하지만 보지 않't.

하나의 전망을 사용했다PureComponent보다는요(에서 수입된대응)그리고 그 원인입니다.

대체하여 모든 경로 렌더링되는 구성 요소를 사용한PureComponent를구성 요소,나의 문제가 해결되었습니다.

(해상도 출처:https://github.com/ReactTraining/react-router/issues/4975#issuecomment-355393785)

Kunok
편집된 답변7일 8월 2018 в 6:37
해설 (2)

흠이 없는 스위치를 실제로 스위치는 전망이다.

이것은 사용하는 방법에 대패에서 전환이트 landin 은 페이지를 주요 사이트

//index.jsx    
ReactDOM.render( (), document.getElementById('root') );

//App.jsx
render()
{
    return <div>




    </div>
}

https://jsfiddle.net/Martins_Abilevs/4jko7arp/11/

ups 나는 당신을 발견 라우터를 사용하여 다른 속도와 보안을 제공합니다!어쩌면 이것이 바이올린 당신을 위해 유용

https://fiddle.jshell.net/terda12/mana88Lm/

어쩌면 핵심의 솔루션에 숨겨진 라인에 대한 기본 렌더링 기능이 있습니다.

Router.run(routes, function(Handler) {
    React.render(, document.getElementById('container'));
});
Martin Abilev
편집된 답변27일 7월 2017 в 12:58
해설 (1)

를 직면하고 있었는 유사한 문제를 해결하는 다음과 같이 참조하시기 바랍 I hope it's 니다.

를 사용해야 합componentWillReceiveProps함수에서 당신의 구성 요소입니다.

링크를 클릭 처음 호출하여 url www.example.com/content1/componentDidMount()를 실행합니다.

을 클릭하면 지금 다른 링크를 말 www.example.com/content2/는 동일한 구성 요소라고 하지만 이번 소품 변경 및 액세스할 수 있습니다 이 새로운 소품에서 componentWillReceiveProps(nextProps)하는 데 사용할 수 있는 통화 API 또는 빈 상태와 새로운 데이터를 얻을.

componentWillReceiveProps(nextProps){
     //call your API and update state with new props
}
해설 (0)

이

import React from "react";

import ReactDOM from "react-dom";
import Users from "./components/Users";
import { Router, Route } from "react-router";

import Details from "./components/Details";

ReactDOM.render((






), document.getElementById('app'))
해설 (1)

내가 만난 문제가 너무입니다.

https://github.com/chengjianhua/templated-operating-system

고 시도했 솔루션 metioned 에 의한 교환은 훌륭 Khatri,그't work.

저는 이 문제를 해결하고,어쩌면 당신을 도울 수 있습니다.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

에 따라 위의 가이드 문서를 사용할 때,PureComponent또는 사용으로 상태 관리 도구처럼돌아오는,mobx...그것을 차단할 수 있습니다 업데이트를 당신의 경로입니다. 로 구성 요소,보았't 록 rerender od 의 구성 요소입니다.

Jianhua Cheng
편집된 답변12일 4월 2017 в 6:25
해설 (0)

In my case,I'd 실수로는 중첩된 두 개의`BrowserRouter 습니다.

해설 (0)

나는 유사한 문제와 조건부 레이아웃:

클래스 LayoutSwitcher 확장 구성 요소{ render(){ const isLoggedIn=다.props.isLoggedIn return( <반응합니다.단편> {isLoggedIn ? <MainLayout{니다.소품}/> :<로그인/> } </React.단편> ) } }

을 했고 같은 조건이므:

render(){ const isLoggedIn=다.props.isLoggedIn 는 경우(isLoggedIn){ return<MainLayout{니다.소품}/> } return<로그인/> }

이 문제를 해결했습니다. 나의 케이스에서,그것은 보인다는 맥락을 잃었다.

해설 (0)

나는 유사한 문제이지만 서로 다른 구조입니다. 나는've 추가되는 하나의 라우터는 모든 경로,나는've 는 데 사용 스위치 구성 요소를 전환하는 뷰가 있습니다. 하지만 실제로,그't. 만 URL 이 변경되었는지만 보기입니다. 그 이유는 링크는 데 사용되는 구성 요소의 안쪽 사이드바를 구성 요소는 외부터 구성 요소입니다. (Yes,I've 수출드"withRouter",작동하지 않). 그래서,이 솔루션을 움직 내 모음 구성 요소를 보유하고,모든 링크를 구성 요소로 라우터입니다.

에 문제가 나의 링커는,그들은 외부의 대패

<div className="_wrapper">
   // Holds my all linkers






 </div>

솔루션을 이동했다 내 linkers 내 router

<div className="_wrapper">

      // Holds my all linkers





</div>
해설 (1)

확인해야 합니다 이웃:https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

따라서 그's 확실히지 않은사용또는내용기 때문에,그들은 바로 렌더링해<루>,그리고는위치을 얻을 것이 전하는소품.

내가 궁금해,당신은 왜 필요한<div>사과<루>`? 를 제거하고 알려주는 경우 작동합니다.

해설 (0)