리액트 라우터를 사용하여 페이지를 새로고침하려면 어떻게 해야 하나요?

리액트 라우터를 사용하여 페이지를 새로고침하려면 어떻게 해야 하나요?

이 파일(https://github.com/ReactTraining/react-router/blob/v0.13.3/modules/createRouter.js)에는 리프레시 기능이 있는 것을 알 수 있습니다만, 어떻게 불러야 할지 모르겠습니다.리액트 라우터는 처음이라 hashHistory를 사용하여 몇 번 페이지 사이를 이동하는 데만 사용해 왔습니다.

현재 설치 실패 시 사용자가 재시도할 수 있도록 이 옵션을 사용하려고 합니다.이 옵션은 설치가 이루어진 페이지(사용자가 현재 표시되어 있는 페이지)를 새로 고침으로써 실행할 예정입니다.어떤 도움이라도 주시면 감사하겠습니다.

웹 앱이 아닌 전자로 실행되는 노드 앱입니다.

첫째, 의존관계로서 반응-반응을 추가합니다.

`yarn add react-router` or `npm install react-router`

import { useHistory } from 'react-router'

const history = useHistory()

/////then add this to the function that is called for re-rendering

history.go(0)

그러면 페이지가 자동으로 다시 렌더링됩니다.

리액트 라우터 V6의 경우 대신 useNavigate 훅을 사용합니다.

import { useNavigate } from 'react-router'

const navigate = useNavigate() 탐색

네비게이션(0)

리액트 라우터 v6를 사용하는 경우

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const refreshPage = () => {
    navigate(0);
}

이를 통해 Current route를 새로 고칠 수 있습니다.

import createHistory from 'history/createBrowserHistory'
const history = createHistory();
history.go(0)

당신은 정말 필요 없어요.react-router이걸 위해서.다음과 같이 사용할 수 있습니다.

location.reload();

또한 링크된 리액트 라우터는 매우 오래된 버전이기 때문에 현재 v4에서 v1에 링크되어 있다고 생각합니다.

리액트 라우터를 쓰시나 봐요.다른 게시물에서 제 답변을 복사하겠습니다.따라서 이를 수행할 수 있는 방법은 거의 없습니다. 현재 제가 가장 선호하는 방법은 컴포넌트 소품에서 익명 기능을 사용하는 것입니다.

<Switch>
  <Route exact path="/" component={()=><HomeContainer/>} />
  <Route exact path="/file/:itemPath/:refHash" component={()=><File/>} />
  <Route exact path="/:folderName" component ={()=><Folder/>}/>
</Switch>

또는 현재 URL 파라미터로 새로고침 할 경우 추가 루트(새로고침)가 필요하며 라우터 스택에서 조금 플레이합니다.

reload = ()=>{
 const current = props.location.pathname;
 this.props.history.replace(`/reload`);
    setTimeout(() => {
      this.props.history.replace(current);
    });
}

<Switch>
  <Route path="/reload" component={null} key="reload" />
  <Route exact path="/" component={HomeContainer} />
  <Route exact path="/file/:itemPath/:refHash" component={File} />
  <Route exact path="/:folderName" component ={Folder}/>
</Switch>

<div onClick={this.reload}>Reload</div>

반응

window.location.reload();

일해

오래된 것은 알지만, 리액트 라우터의 문서에 따라 간단한 해결책을 찾았습니다.

이 속성을 라우터에 저장하기만 하면 새 경로에 있을 때마다 페이지가 강제로 새로고침됩니다.

<Router forceRefresh={true}>

출처 : https://reactrouter.com/web/api/BrowserRouter/forcerefresh-bool

데이터를 재인스톨 하려면 , 다음의 조작을 실시해 주세요.

import { useLocation } from 'react-router'

const location = useLocation()

useEffect(() => {
  fetchData()
}, [location.key])

이 솔루션에서는 불필요한 전체 페이지 새로고침은 발생하지 않지만 새로고침이 필요한 각 페이지를 다음과 같이 변경해야 합니다.

export const Page = () => {
   const location = useLocation();
   return <PageImpl key={location.key} />
}

즉, 페이지 주위에 래퍼를 만들고 위치 키가 변경될 때마다 React가 실제 페이지를 다시 작성하도록 하는 것입니다.

해도 충분해history.push(/this-page-route)페이지가 갱신됩니다.

「 」를 사용하고 <Link/>루트를 푸시를 " "를 설정할 수 .<Redirect/><Switch/>음음음같 뭇매하다

<Switch>
    <Route exact path="/some-route" component={SomeRoute} />
    <Redirect exact from="/some-route/reload" to="/some-route" />
</Switch>

다음에 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ.<Link to="/some-route/reload" /> ★★★★★★★★★★★★★★★★★」push("/some-route/reload")

모든 스크립트를 다시 로드하지 않을 경우 현재 경로를 가짜 또는 빈 경로로 교체하고 다음과 같이 현재 경로로 다시 바꿀 수 있습니다.

// ...
let currentPath = window.location.pathname;
history.replace('/your-empty-route');
setTimeout(() => {
    history.replace(currentPath)
}, 0)
// ...

업데이트:

주소 바의 변경이 귀찮은 경우는, 다음과 같은 패턴의 루트를 추가할 수 있습니다.

<Route path="/*/reload" component={null}/>

/replacecurrentPath음음음같 뭇매하다

// ...
let currentPath = window.location.pathname;
history.replace(`${currentPath}/replace`);
setTimeout(() => {
    history.replace(currentPath)
}, 0)
// ...

하면, 「 」는, 「 」는reload키워드는 현재 경로의 끝에 추가되며 사용자 친화적이라고 생각합니다.

주의: 치환으로 끝나는 경로가 이미 있는 경우 충돌이 발생합니다.이 문제를 해결하려면 패턴화된 경로 경로를 다른 경로로 변경해야 합니다.

이 회피책은 다음과 같습니다.

// I just wanted to reload a /messages page
history.pushState(null, '/');
history.pushState(null, '/messages');

이 기능을 사용할 수 있습니다.

function reloadPage(){ 
    window.location.reload(); 
}

<input type="button" onClick={ reloadPage }  value="reload"/>

오브젝트를 할 수 를 「이력 오브젝트」로 합니다.withrouter 「」를 사용합니다.window.location.href = url리리이이이이이

이를 실현하려면 React Router v6를 사용합니다.

import React from 'react';
import { useNavigation, useLocation } from 'react-router-dom';

const Component = () => {
 const history = useNavigation();
 const location = useLocation();

 const reload = () => {
   navigate(location.pathname);
 };

 return (
  ...
 );
};

새로고침 기능을 useEffect 후크 안에 넣습니다.

PS: 하지만 리액트 라우터는 자동으로 페이지를 새로고침하기 때문에 이것은 이상한 질문입니다.

새로고침이 를 사용합니다.history.go(0)(History.go() 메서드를 랩합니다).

동기적으로 가 있는 는, 「」를 사용해 .history.push(location.pathname)(History.pushState() 메서드를 랩합니다).

에서는 이미 '예'를 사용한 가 있기 history.go(0) 예를 들어 보겠습니다.history.push(location.pathname):

import React from 'react';
import { useHistory, useLocation } from 'react-router-dom';

const Component = () => {
  const history = useHistory();
  const location = useLocation();

  const reload = () => {
    history.push(location.pathname);
  };

  return (
    ...
  );
};

React Router 6 에서는, 간단하게 다음과 같이 기술할 수 있습니다.

import {useNavigate} from "react-router-dom";

 const navigate = useNavigate()

    const goToPageOnClick = () =>{
        navigate(target_url)
        navigate(0)
    }

webpacker.yml 업데이트

  devServer: {
    historyApiFallback: true,
  }

그에 를 하는 window.location.reload()하다

<Switch>
  <Route exact exact path="/" component={SomeComponent} />
  <Route path="/reload" render= {(props)=>window.location.reload()} />
</Switch>

최근에도 같은 문제가 발생하여 https://github.com/skt-t1-byungi/react-router-refreshable)를 만들었습니다.

<Refreshable>
    <Switch>
        <Route path="/home">
            <HomePage />
        </Route>
        <Route path="/post">
            <PostPage />
        </Route>
        {/* ... */}
    </Switch>
</Refreshable>

언급URL : https://stackoverflow.com/questions/46820682/how-do-i-reload-a-page-with-react-router