«react-router» 태그된 질문

나는 생각하고 클라이언트와 서버 사이의 라우팅과 혼동됩니다. 요청을 웹 브라우저로 다시 보내기 전에 ReactJS를 서버 측 렌더링에 사용하고 react-router를 클라이언트 측 라우팅으로 사용하여 SPA로 새로 고치지 않고 페이지 사이를 전환한다고 가정합니다. 떠오르는 것은 : 경로는 어떻게 해석됩니까? 예를 들어 홈페이지 ( /home)에서 게시물 페이지 ( /posts) 로의 요청 라우팅은 서버 …

108 javascript  reactjs  routes  react-router  url-routing 

나는 때때로 사람들 withRouter이 그들을 내보낼 때 구성 요소를 감싸는 것을 보았습니다 . import { withRouter } from 'react-router-dom'; class Foo extends React.Component { // ... } export default withRouter(Foo); 이것은 무엇을위한 것이며 언제 사용해야합니까?

108 reactjs  react-router 

react-router (v4.0.0)와 react-hot-loader (3.0.0-beta.6)가 멋지게 재생되도록 시도했지만 브라우저 콘솔에서 다음 오류가 발생합니다. 경고 : React.createElement : 유형이 유효하지 않습니다. 문자열 (내장 구성 요소의 경우) 또는 클래스 / 함수 (복합 구성 요소의 경우)가 필요하지만 정의되지 않았습니다. 정의 된 파일에서 구성 요소를 내보내는 것을 잊었을 수 있습니다. index.js : import React from …

108 reactjs  react-router  react-hot-loader 

내 반응 앱을 webpack-dev-server에서 nginx로 전환하고 있습니다. 루트 URL "localhost : 8080 / login"으로 이동하면 간단히 404가 표시되고 nginx 로그에서 다음을 가져 오려고한다는 것을 알 수 있습니다. my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /login …

107 nginx  react-router 

저는 React Router를 처음 접했고 페이지를 리디렉션하는 방법이 너무 많다는 것을 알게되었습니다. 사용 browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); 사용 this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } React …

106 reactjs  redux  react-router 

/#/react-router를 사용할 때 브라우저의 주소 표시 줄에 표시 되지 않도록 하는 방법이 있습니까? 그것은 ReactJS입니다. 즉, 링크를 클릭하여 새 경로로 이동하면 localhost:3000/#/또는 localhost:3000/#/about. 경로에 따라 다릅니다.

103 reactjs  react-router 

React-Router v3에서 v4로 마이그레이션하는 데 약간의 문제가 있습니다. v3에서는 어디서든이 작업을 수행 할 수있었습니다. import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); v4에서 어떻게 이것을 달성합니까? withRouter컴포넌트에있을 때 hoc , 반응 컨텍스트 또는 이벤트 라우터 소품을 사용할 수 있다는 것을 알고 있습니다. 하지만 나에게는 그렇지 않습니다. v4에서 NavigatingOutsideOfComponents 의 동등성을 찾고 …

103 reactjs  react-router 

IndexRoute 및 IndexLink 사용 목적이 무엇인지 이해하지 못합니다 . 어떤 경우에도 About 경로가 활성화되지 않으면 아래 코드가 Home 구성 요소를 먼저 선택한 것 같습니다. <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> vs <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> 첫 번째 경우의 장점 / 목적은 …

102 javascript  reactjs  react-router  url-routing 

다음이 있습니다. <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> DefaultRoute를 사용할 때 모든 * Dashboard가 Dashboard 내에서 렌더링되어야하므로 SearchDashboard가 잘못 렌더링됩니다. "app"Route 내의 DefaultRoute가 Route "searchDashboard"를 가리 키도록하고 싶습니다. 이것이 내가 …

98 javascript  routes  reactjs  url-redirection  react-router 

react-router를 사용하여 반응 응용 프로그램을 작업 중입니다. 다음과 같은 URL이있는 프로젝트 페이지가 있습니다. myapplication.com/project/unique-project-id 프로젝트 구성 요소가로드되면 componentDidMount 이벤트에서 해당 프로젝트에 대한 데이터 요청을 트리거합니다. 이제 두 프로젝트간에 직접 전환하면 ID 만 이와 같이 변경되는 문제가 발생합니다. myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMount가 다시 트리거되지 않으므로 데이터가 새로 고쳐지지 않습니다. 데이터 요청을 …

97 reactjs  react-router 

저는 ReactJs를 처음 사용합니다. 이것은 내 코드입니다. var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); 웹팩으로 컴파일합니다. 또한 별칭에 Main 구성 요소를 추가했습니다. 콘솔에서 다음 오류가 발생합니다. 다음 링크도 읽었습니다. React …

97 reactjs  react-router 

NavLink에서 "activeClassName"및 "activeStyle"을 설정하는 기능 외에도 사이트에서 탐색하지 않는 요소 (예 : 머리글 또는 바닥 글의 기본 탐색이 아님)의 다른 경로에 대한 링크를 만들 때 NavLink over Link 를 사용하는 이유가 있습니까? 활성 상태 / 클래스가 필요하지 않습니까?

94 reactjs  react-router  react-router-v4 

검색 기록에 따라 비즈니스 로직을 구현해야합니다. 내가 원하는 것은 다음과 같습니다. reactRouter.onUrlChange(url => { this.history.push(url); }); URL이 업데이트 될 때 react-router에서 콜백을받는 방법이 있습니까?

91 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom 

React-Router (v4)를 시도 중이며 Nav를 시작하여 Link's 중 하나를 사용하는 데 문제가 있습니다 active. Link태그 중 하나를 클릭 하면 활성 항목이 작동하기 시작합니다. 그러나 홈 Link이 /경로 에서로드되는 구성 요소이기 때문에 앱이 시작되는 즉시 활성화 되기를 원합니다 . 이것을 할 방법이 있습니까? 내 현재 코드는 다음과 같습니다. const Router = …

91 javascript  reactjs  ecmascript-6  react-router 

내 프로젝트에서 react-router-dom 4.0.0-beta.6을 사용하고 있습니다. 다음과 같은 코드가 있습니다. <Route exact path="/home" component={HomePage}/> 그리고 HomePage구성 요소 에서 쿼리 매개 변수를 얻고 싶습니다 . location.search다음과 같은 param을 찾았 ?key=value으므로 구문 분석되지 않았습니다. react-router v4로 쿼리 매개 변수를 얻는 올바른 방법은 무엇입니까?

87 react-router  react-router-v4  react-router-dom