Reactjs 如何使用react router 4.0刷新当前路由？不重新加载整个页面

“react router dom”具有刷新功能，但我不知道如何调用此方法，而且他们也懒得解释这一点

window.location.reload（）对我不起作用，因为它也会清除应用商店。我更改了一些数据，然后需要用更新的数据重新加载路由

我还读到：

这个帖子正是在讨论我的问题：

还不知道怎么做。这个基本功能应该不需要太多的努力，但在花费了大量的努力之后，我无法重新加载当前路线

这是我的密码：

@inject('store') @observer
export default class PasswordInput extends Component {
    constructor (props) {
        super(props)
        this.setPwd = this.setPwd.bind(this)
        this.submit = this.submit.bind(this)
    }

    componentWillMount() {
        this.case = this.props.store.case

        this.setState({refresh: false})
    }
    setPwd(e) {
        // console.log(e)
        this.case.pwd = e.target.value

    }
    submit() {
        console.log(this.props.caseId)
        this.setState({refresh: true})

    }

    render() {
        return (
            <Container>
                <div>{this.state.refresh}</div>
                { (this.state.refresh) && <Redirect refresh={true} to={'/cases/' + this.props.caseId}></Redirect>}
                <br />
                <Grid columns="three">
                    <Grid.Row>
                        <Grid.Column key={2}>
                            <Form>
                                <label>Enter Password</label>
                                <input placeholder="empty"  type="text" onChange={this.setPwd} value={this.case.pwd}></input>                               

                                <Button name="Save" color="green" size="mini" 
                                style={{marginTop:'1em'}}
                                onClick={this.submit}>
                                    Submit
                                </Button>                               
                            </Form>
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Container>
        )
    }
}

@inject（'store'）@observer
导出默认类PasswordInput扩展组件{
建造师（道具）{
超级（道具）
this.setPwd=this.setPwd.bind（this）
this.submit=this.submit.bind（this）
}
组件willmount（）{
this.case=this.props.store.case
this.setState（{refresh:false}）
}
setPwd（e）{
//控制台日志（e）
this.case.pwd=e.target.value
}
提交（）{
console.log（this.props.caseId）
this.setState（{refresh:true}）
}
render（）{
返回(
{this.state.refresh}
{（this.state.refresh）&&}


输入密码
提交
)
}
}

我也有同样的问题，我不知道刷新是如何进行的。我的解决方案是执行以下两个步骤

推动新的历史之路

重置所有状态

---

然后DOM将重新加载您的路由。

我解决了这个问题，将新路由推到历史记录中，然后用当前路由（或要刷新的路由）替换该路由。这将触发react路由器“重新加载”路由，而不刷新整个页面

if (routesEqual && forceRefresh) {
    router.push({ pathname: "/empty" });
    router.replace({ pathname: "/route-to-refresh" });
}

React router的工作原理是使用浏览器历史记录进行导航，而无需重新加载整个页面。如果您强制路由进入历史记录，路由器将检测到该情况并重新加载路由。更换空行路线很重要，这样在按下按钮后，后退按钮不会将您带到空行路线

---

据了解，react路由器库似乎不支持此功能，而且可能永远不会支持，因此您必须以一种黑客方式强制刷新

只有这一点对我有效：

reloadOrNavigate = () => {
  const { history, location } = this.props;
  if (location.pathname === '/dashboard') {
    history.replace(`/reload`);
    setTimeout(() => {
      history.replace(`/dashboard`);
    });
  } else {
    history.push('/dashboard');
  }
};

---

答案与前一个类似，但我需要添加

setTimeout

函数以使其正常工作。在我的例子中，如果我在

/dashboard

页面上，我必须通过单击徽标刷新当前URL。首先，它转到额外路径

/reload

（名称由您决定），然后立即返回。页面在不到一秒钟的时间内变为白色，并显示重新加载的数据。没有在浏览器中重新加载，仍然是SPA，这是好的

下面是我使用react router dom的“重定向”的解决方案：

}/>
}/>

你可以用这个小把戏。 在历史记录中推送一个新路径，如history.Push（'/temp'），并立即调用history.goBack（）

下面是一个例子：

创建历史记录并将其传递给路由器：

import { createBrowserHistory } from "history";

export const appHistory = createBrowserHistory();

<Router history={appHistory}>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

---

这样，路线将“保持”不变，并将被刷新。

我就是这样实现的：

if (currentUrl == newUrl) {
    props.history.push("/temp");
    props.history.goBack();
}

---

我不知道react路由器是否已经解决了这个问题，但就我而言。我使用路径名刷新创建了一条新路由，该路径名可以在第一次渲染组件时返回

<Route
    path="/refresh"
    exact
    component={() => {
       useEffect(() => history.goBack(), []);
       return <></>;
    }}
 />

{
useffect（（）=>history.goBack（），[]）；
返回；
}}
/>

---

所以当我想刷新路线时。我只是按下刷新路由，然后它返回，然后呈现一个新的重新加载结果

好吧，我以前试过几乎所有的答案，但都没用。这是我唯一可以强制重新加载的方法

我使用的是redux，但您也可以使用您喜欢的任何状态管理

1-将布尔值设置为false

2-在链接/按钮中添加一个onClick函数，将布尔值设置为true

3-将该布尔变量添加到useEffect（）中

这将触发重新渲染

useEffect(() => {
   // Do stuff...
},[forceReload])

const forceReload = () => {
   dispatch({ type: RELOAD });
   // OR useState or whatever you want
   setForceReload(true);
}


...
<Link onClick={forceReload} to="/my-path-that-does-not-reload">
   Reload Page
</Link>

useffect（（）=>{
//做些事情。。。
}，[forceReload]）
常量forceReload=（）=>{
分派（{type:RELOAD}）；
//或者使用state或者你想要的任何东西
setForceReload（true）；
}
...
重新加载页面

---

对于链接和HTML按钮标记来说，这对我来说是有效的。

“刷新”路由听起来像是xy问题。您实际上想要实现什么？您可能应该为此创建一个JSFIDLE。当组件观察到的数据发生更改时，组件将重新渲染。虽然这可能会回答这个问题，但您的答案应该包括代码如何回答这个问题，以便为将来的读者提供上下文。代码块本身并不能立即对那些以后可能遇到相同问题的人有用。

<Route
    path="/refresh"
    exact
    component={() => {
       useEffect(() => history.goBack(), []);
       return <></>;
    }}
 />

useEffect(() => {
   // Do stuff...
},[forceReload])

const forceReload = () => {
   dispatch({ type: RELOAD });
   // OR useState or whatever you want
   setForceReload(true);
}


...
<Link onClick={forceReload} to="/my-path-that-does-not-reload">
   Reload Page
</Link>