라우터 변경 url 응답은 하지만 보기 없음

라우터 변경 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 /details를 사용하면 브라우저가 해당 url로 이동하지만 보기를 변경하지 않는다.다른 어떤 경로도 404를 던지기 때문에 경로를 인식하지만 업데이트되지는 않는 것 같다.

속을을 attribute attribute의 가 있다.exact 않으면 IndexRoute를 , 그면 지 면면 수 있다./details그것은 여전히 일치할 것이다./. 또한 가져오기를 시도하십시오.Route로부터react-router-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구성 요소가 수신되지 않는 경우에만Router props

이것은 당신의 구성요소가 라우터에 의해 렌더링된 구성요소의 중첩된 자식이거나 라우터 소품을 전달하지 않은 경우 또는 구성요소가 라우터에 전혀 연결되지 않고 라우터에서 별도의 구성요소로 렌더링되는 경우에 발생할 수 있다.

Users.js에서 추가

import {withRouter} from 'react-router';

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

DOCS

부품은 로터로 안에 싸면 돼.

<Route exact 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;

추가

반응 라우터를 사용하는 경우 URL이 변경될 때마다 componentWillReceiveProps가 호출된다.

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

참고

또는 내보내기 전에 구성 요소를 Router와 함께 포장할 수도 있지만, 그런 다음 몇 가지 다른 사항을 확인해야 한다.나는 보통 이 단계를 건너뛰어.

export default withRouter(Profile)

나는 같은 문제를 가지고 있었고 그것이 내가 중첩된 라우터를 가지고 있기 때문이라는 것을 알게 되었다.일단 중첩된 라우터를 제거하고 스위치 구성요소 내에 내 구성요소별 경로를 넣기만 하면, Router와 함께 사용하거나 추가 변경 없이 문제가 해결되었다.

<Router> // <--Remove nested Router
    <Switch>
      <Route exact path="/workflows" component={ViewWorkflows} />
      <Route path="/workflows/new" component={NewWorkflow} />
    </Switch>
</Router>

유수프벡은 비슷한 문제를 설명하고 있다.나는 모든 구성 요소 관련 루트를 하나의 메인 라우터에 저장하는 것보다 뷰 레벨에 저장하는 것이 훨씬 더 깨끗하다고 생각한다.프로덕션 앱에서는 문제를 쉽게 읽고 디버깅하기에는 너무 많은 루트가 될 겁니다.

나는 같은 문제에 직면했지만 고쳤다.홈페이지는 내가 마지막 페이지를 장식했다.그것은 나에게 효과가 있다.아래처럼.

    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="/details" component={Details} />
            <Route path="/" component={Users} />
        </div>
      </BrowserRouter>
    ), document.getElementById('app'))

나는 비슷한 문제가 있었지만 구조가 달랐다.모든 경로를 처리할 라우터를 하나 추가했고 보기를 전환하기 위해 스위치 구성요소를 사용했어.하지만 사실은 그렇지 않았다.URL만 변경되었지만 보지는 않음.그 이유는 라우터 컴포넌트 외부에 있는 SideBar 컴포넌트 내부에 사용된 Link 컴포넌트였다.(네, 나는 "withRouter"로 SideBar를 내보냈는데, 작동하지 않았다.)그래서, 해결책은 내 SideBar 구성요소를 가지고 있는 모든 링크 구성요소를 라우터로 옮기는 것이었습니다.

문제는 내 링커에 있는데, 그것들은 내 라우터 밖에 있다.

<div className="_wrapper">
  <SideBar /> // Holds my all linkers
  <Router>
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
 </div>

해결책은 내 링커를 라우터로 이동시키는 것이었습니다.

<div className="_wrapper">
  <Router>
     <SideBar /> // Holds my all linkers
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
</div>

나도 같은 문제를 가지고 있었다.react-router-dom 5

문제는 이 때문에 일어났다.history꾸러미내가 사용하던 버전은5.0.0하지만 그들은 함께 일하지 않는다.

다운그레이드에 의해 수정됨history로4.10.1

관련 문제: https://github.com/ReactTraining/history/issues/804

BrowserRouter가 사용자의 경우 기록을 유지하지 못함대신 "라우터"를 사용하십시오. 사용자 지정 기록을 소품으로 사용하면 문제를 해결하는 데 도움이 될 수 있습니다.

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

export const customHistory = createBrowserHistory();  //This maintains custom history

class App extends Component {
  render() {
    return (
      <Router history={customHistory}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/profile" component={Profile} />
        </Switch>
      </Router>
    );
  }
}

export default App;

그런 다음 구성 요소에서 사용자 정의 가져오기'앱'의 히스토리를 사용하여 탐색하십시오.

customHistory.push('/pathname');

이것이 도움이 되기를! :)

Redex를 사용할 때 주소 표시줄에서 URL이 업데이트되지만 앱에서 해당 구성 요소를 로드하지 않는 유사한 문제가 있었다.Router를 수출에 추가함으로써 해결할 수 있었다.

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

export default withRouter(connect(mapStateToProps)(MyComponentName))

내 경우엔, 내가 실수로 두 개를 내포했었어BrowserRouters

인덱스 경로에 정확히 추가하고 이러한 경로 구성요소를 div로 둘러싸기보다는 반응 라우터 도메인에서 Switch를 사용하여 경로 간을 전환하십시오.

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'))

이렇게 홈길 앞에 '정확한'을 추가해 보았다.

<Route exact path="/" component={Home}></Route>

잘 되고 있어...

Ract Router 버전 4와 비슷한 문제가 있었다.

클 clicking <Link />구성 요소, URL은 변경되지만 보기는 변경되지 않음.

한 가지 관점은 다음과 같다.PureComponentComponent(에서 제외)react 그리고 그것이 원인이었다.

사용 중인 모든 경로 렌더링 구성요소 교체PureComponent로Component, 내 문제가 해결되었다.

(해상도 출처: 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>
}

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

ups 나는 네가 다른 라우터를 사용하는 것을 발견했다.미안 그럼 이 바이올린 너에게 쓸모가 있을지도 몰라.

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

아마도 용액의 열쇠는 주 렌더 기능을 위해 줄에 숨겨져 있을 것이다.

Router.run(routes, function(Handler) {
    React.render(<Handler />, document.getElementById('container'));
});

나도 비슷한 문제에 직면하고 있었는데 이걸 좋아하기로 결심했어. 잘 됐으면 좋겠는데 한번 봐봐.

구성 요소에서 구성 요소WillReceiveProps 기능을 사용하십시오.

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

이제 다른 링크를 클릭하면 동일한 구성 요소가 호출되지만 이번에는 프로펠러가 변경되고 API를 호출하거나 상태를 공백으로 만들고 새 데이터를 가져오는 데 사용할 수 있는 구성 요소WillReceiveProps(다음 프로펠러) 아래의 새로운 프로펠러에 액세스할 수 있다.

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

나로서는 다음과 같은 일이 있었다.

export MyClass extends React.Component

다음 항목 포함:

export default withRouter(MyClass)

한편, 내 앱 js에서는 다음과 같이 말했다.

import { MyClass } from './MyClass'

홈 게임을 하는 사람들은 내 문제를 볼 수 있다.나는 라우터가 아동 클래스에 전달된 상태에서 수입을 얻지 못했다.이 문제를 해결하려면 withRouter 호출을 Route 구성 요소 선언으로 이동하십시오.

<Router exact path={'/myclass'} component={withRouter(MyClass)} />

MyClass에서 기본 내보내기로 변경했었습니다.

export default MyClass extends React.Component

그리고 마침내 App.js에서 수입을 다음과 같이 변경했다.

import MyClass from './MyClass'

이게 누군가에게 도움이 되었으면 좋겠어.이것은 내가 같은 클래스를 내보낼 수 있는 두 가지 방법을 가지고 있지 않았음을 보장한다. 따라서 라우터 프리텐드를 우회한다.

나도 같은 문제가 있었어.그다지 효과적인 해결책은 아니지만 교활한 방법으로 해결했다.ComponentDidMount 메서드는 URL이 변경될 때마다 작동하며,이 방법 안에서 우리는 이전 URL을 현재 URL과 비교할 수 있고 상태 변경이나 페이지 새로 고침을 할 수 있다.

componentDidUpdate(prevProps) {
    if (this.props.match.url !== prevProps.match.url) {
        //this.props.history.go(0) refresh Page
        //this.setState(...) or change state
    }
}

<Route exact path="/" component={Users} />
<Route exact path="/details" component={Details} />

나 또한 같은 문제에 직면하고 있었는데, 그 문제는 그 문제를 이용하여 해결되었다.exact기여하다을 사용하려고 하다.exact기여하다

나도 문제를 만났다.

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

그리고 나는 슈밤 카트리가 열변을 토하는 해결책을 시도해 보았지만, 효과가 없다.

---

내가 이 문제를 해결했으니, 아마 너를 도울 수 있을 거야.

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

의 이 위의 가도를 때.PureComponent또는 다음과 같은 상태 관리 도구와 함께 사용reduxmobx할 수 있다... 당신의 경로의 업데이트를 방해할 수 있다.경로 구성요소를 확인하고, 구성요소의 렌더링을 막지 않았는지 확인하십시오.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md에서 확인하십시오.

그러므로 확실히 그렇지 않다.Users또는Details에 의해 직접 렌더링되기 때문이다.<Route>, 그리고location에 합격할 것이다props.

궁금한 게 있는데, 왜 그런 게 필요하시죠?<div>사이에<BrowserRouter>그리고<Route>그것을 제거하고 그것이 효과가 있는지 내게 알려줘.

나는 조건부 레이아웃과 비슷한 문제가 있었다.

class LayoutSwitcher extends Component {
  render () {
    const isLoggedIn = this.props.isLoggedIn
    return (
      <React.Fragment>
        { isLoggedIn
          ? <MainLayout {...this.props} />
          : <Login />
        }
      </React.Fragment>
    )
  }
}

그리고 다음과 같이 조건을 다시 썼다.

  render () {
    const isLoggedIn = this.props.isLoggedIn
    if (isLoggedIn) {
      return <MainLayout {...this.props} />
    }
    return <Login />
  }

이것으로 해결되었다.내 경우 맥락이 사라진 것 같다.

나는 같은 이슈를 이해한다.이 경우에는 Router와 함께 소품을 추가할 필요가 없다고 생각하지만, NavLink에서 자세히 올바른 경로 이름을 입력하십시오.그 노선은 다음과 같은 특정 노선에서 일반 노선으로 출발하려고 시도한다.

<Route path="/details" component={Details} />
<Route path="/" component={Users} />

NavLink는 다음과 같은 것이 되어야 한다.

 <NavLink className="nav-link" to="/details">
   details<span className="sr-only">(current)</span>
 </NavLink>

수입에 대한 재규격. 수입에 관련된 모든 것을 수입하는 것부터 시작하는 것이 좋다. 이 모듈처럼 다른 모듈을 수입한 후에는 다음과 같이 반응한다.

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";

이렇게 오다:

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

import Users from "./components/Users";    
import Details from "./components/Details";

내 경우 BrowserRouter 대신 HashRouter로 전환하여 문제를 해결했다.

나는 실수로 링크 주변에서 BrowserRouter를 사용하고 있었다.

<BrowserRouter>
    <div>
        <Link to="/" component={Users} />
        <Link to="/details" component={Details} />
    </div>
</BrowserRouter>

최근에 이 문제가 발생하기 시작했으면 https://github.com/remix-run/react-router/issues/7415을 참조하십시오.

문제는 리액터-루터-돔 5+와 역사 의존이다.

다음을 사용하여 별도로 설치한 경우yarn install history당신은 그것을 제거해야 한다, doyarn install history@4.10.1

여기 있는 어떤 대답도 내 문제를 해결하지 못했고, 알고 보니 나는 내 문제에 의존성을 더해야 했다.useEffect. 나 거

App.js

<Route
  path="/product/:id"
  component={MyComponent}
/>

MyComponent.jsx

const { id } = useParams();

useEffect(() => {
  fetchData();
}, []);

다른 제품으로 바꾸는 버튼이 있었는데, 이 버튼은 단지:idURL에서 URL이 변경된 것을 볼 수 있었지만 페이지에는 아무런 영향이 없었다.이러한 변경으로 인해 다음과 같은 문제가 해결되었다.

MyComponent.jsx

const { id } = useParams();

useEffect(() => {
  fetchData();
}, [id]); // add 'id' to dependency array

지금 그 때id변경, 데이터 업데이트 기능을 트리거하고 예상대로 작동한다.

이거 먹어봐.

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'))

나는 같은 문제가 있었고 node_modules의 @type 폴더에서 이력을 가져오는 것을 수정했다.npm에서 수입했다(npm i @history)

User and Details 구성 요소를 확인하십시오.그들은 라우터 구성요소를 가지고 있지 않아야 한다.사용 중인 경우<Link to=../>은 a이다.<Router>라우터를 제거하고 링크만 사용하십시오.

만약 누군가 그 제품을 사용하고 있다면history탐색용 패키지 및 사용 중인 경우react-router v5그리고 나서, 당신은 아마도 아래층으로 내려가야 할지도 모른다.history로 포장하다.4.10.1끝까지history패키지 개발자들은 수정사항과 함께 새로운 릴리즈를 발행한다.이 글을 쓰면서, 의 최신 릴리스 버전history패키지는v5.0.1, 그리고 만약 당신이 이것보다 새로운 버전을 본다면 , 당신은 다운그레이드를 하기 전에 그것이 작동하는지 보기 위해 먼저 그 버전을 사용해 볼 수 있다.4.10.1

이슈 링크 -> https://github.com/remix-run/history/issues/804

위의 예와 같이 라우터 구성 요소를 구성하고 history.push 또는 props에 액세스해 보십시오.history.push는 URL을 변경하는 동안 구성요소를 렌더링하지 않는 문제에 직면할 수 있다. BrowserRouter를 라우터로 가져오는 대신 react-router-dom에서 직접 라우터를 가져와 이 문제를 해결할 수 있다.수정된 코드는 아래에서 찾을 수 있다.

예: "react-router-dom"에서 { Router, Switch, Route, } 가져오기;

not: "react-router-dom"에서 { BrowserRouter를 라우터, 스위치, 라우트, }(으)로 가져오기;

참조URL: https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view