나는 데 문제가 변경하에서 보기 반응과 라우팅이라고 합니다. 그것은 보인다가 모든 것을 내가할 수 있는 구글이 없는 행운입니다. 나만 보여주고 싶은 사용자의 목록을 클릭하면 각 사용자를 탐색하면 정보 페이지로 이동합니다. 여기에는 이 라우터:
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 그래서 그것을 인식하고있지만 업데이트합니다.
를 지정해야 합 특성정확한
에 대한 귀하의 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((
<BrowserRouter>
<div>
<Route exact path="/" component={Users} />
<Route path="/details" component={Details} />
</div>
</BrowserRouter>
), document.getElementById('app'))
업데이트:
다른 일을 할 필요가 있는가를 연결하는 구성요소와 사용자는withRouter
. 당신의 사용을 만들 필요가withRouter
하는 경우에만 구성 요소를 받지라우터 소품
,
이러한 현상이 발생할 수 있습 경우에 당신의 구성 요소입중첩 아동의 구성 요소 렌더링에 대패나you haven't 통과 라우터 소품을는 경우 또는 구성요소가 연결되지 않 라우터에서 모든 프로그램 또는 공급업체에 독립적인 별도의 구성요소에서 노선이 있습니다.
에 Users.js 추가
import {withRouter} from 'react-router';
.........
export default withRouter(Users)
당신을 감싸는 내부 구성품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 (
<Router>
<Switch>
<Route exact path="/" component={withRouter(Home)} />
<Route exact path="/profile" component={withRouter(Profile)} />
</Switch>
</Router>
);
}
}
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)
을 사용할 때는 돌아오는하고<링크>
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(MyComponentName))
당신이 필요해 추가 정확한 색인 경로를 보다는 오히려 바깥쪽 그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>
<Switch>
<Route path="/" component={Users} exact/>
<Route path="/details" component={Details} />
</Switch>
</div>
), document.getElementById('app'))
나는 유사한 문제에 반응 라우터 버전 4:
를 클릭하여<링크/>
구성 요소,URL 을 변경하지만 보지 않't.
하나의 전망을 사용했다PureComponent
보다는요
(에서 수입된대응
)그리고 그 원인입니다.
대체하여 모든 경로 렌더링되는 구성 요소를 사용한PureComponent
를구성 요소
,나의 문제가 해결되었습니다.
(해상도 출처:https://github.com/ReactTraining/react-router/issues/4975#issuecomment-355393785)
흠이 없는 스위치를 실제로 스위치는 전망이다.
이것은 사용하는 방법에 대패에서 전환이트 landin 은 페이지를 주요 사이트
//index.jsx
ReactDOM.render( (<BrowserRouter><App/></BrowserRouter>), document.getElementById('root') );
//App.jsx
render()
{
return <div>
<Switch>
<Route exact path='/' component={Lander}/>
<Route path='/vadatajs' component={Vadatajs}/>
</Switch>
</div>
}
ups 나는 당신을 발견 라우터를 사용하여 다른 속도와 보안을 제공합니다!어쩌면 이것이 바이올린 당신을 위해 유용
https://fiddle.jshell.net/terda12/mana88Lm/
어쩌면 핵심의 솔루션에 숨겨진 라인에 대한 기본 렌더링 기능이 있습니다.
Router.run(routes, function(Handler) {
React.render(<Handler />, document.getElementById('container'));
});
를 직면하고 있었는 유사한 문제를 해결하는 다음과 같이 참조하시기 바랍 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
}
이
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((
<Router>
<Route path="/" component={Wrapper} >
<IndexRoute component={Users} />
<Route path="/details" component={Details} />
</Route>
</Router>
), document.getElementById('app'))
내가 만난 문제가 너무입니다.
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 의 구성 요소입니다.
나는 유사한 문제와 조건부 레이아웃:
클래스 LayoutSwitcher 확장 구성 요소{ render(){ const isLoggedIn=다.props.isLoggedIn return( <반응합니다.단편> {isLoggedIn ? <MainLayout{니다.소품}/> :<로그인/> } </React.단편> ) } }
을 했고 같은 조건이므:
render(){ const isLoggedIn=다.props.isLoggedIn 는 경우(isLoggedIn){ return<MainLayout{니다.소품}/> } return<로그인/> }
이 문제를 해결했습니다. 나의 케이스에서,그것은 보인다는 맥락을 잃었다.
나는 유사한 문제이지만 서로 다른 구조입니다. 나는've 추가되는 하나의 라우터는 모든 경로,나는've 는 데 사용 스위치 구성 요소를 전환하는 뷰가 있습니다. 하지만 실제로,그't. 만 URL 이 변경되었는지만 보기입니다. 그 이유는 링크는 데 사용되는 구성 요소의 안쪽 사이드바를 구성 요소는 외부터 구성 요소입니다. (Yes,I've 수출드"withRouter",작동하지 않). 그래서,이 솔루션을 움직 내 모음 구성 요소를 보유하고,모든 링크를 구성 요소로 라우터입니다.
에 문제가 나의 링커는,그들은 외부의 대패
<div className="_wrapper">
<SideBar /> // Holds my all linkers
<Router>
<Switch>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</Router>
</div>
솔루션을 이동했다 내 linkers 내 router
<div className="_wrapper">
<Router>
<SideBar /> // Holds my all linkers
<Switch>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</Router>
</div>