react-router-v4 没有正确重定向

Posted 2023-02-22

【中文标题】react-router-v4 没有正确重定向

【英文标题】：react-router-v4 not redirecting properly

【发布时间】：2017-11-14 05:24:37

【问题描述】：

我已经将 url 更改为我想要的 url，但我可以让它工作的唯一方法是刷新页面，然后它转到 url。

假设我在 localhost:3000/signin 上，当我登录时，我希望用户被重定向到 localhost:3000/posts 上的帖子页面。当我单击按钮时，我得到 localhost:3000/posts 但页面只停留在登录页面上。我必须点击刷新才能访问该 URL。

**********

编辑：我还注意到，当我在浏览器中向后或向前点击时，它不会呈现，直到我点击刷新。所以这可能是其他问题？我正在使用 react-router-v4。

---

这是我目前的代码：

这是单击按钮时调用的提交函数：

onSubmit(email, password) 
    this.props.signinUser(email, password, () => 
      this.props.history.push('/posts');
    );
  

这是登录用户操作：

export function signinUser(email, password, cb) 
  return function(dispatch) 
    axios.post(`$ROOT_URL/signin`, email, password)
      .then((response) => 
        dispatch(type: AUTH_USER);
        console.log(response);
        localStorage.setItem('token', response.data.token);
        cb();
      )
      .catch(() => 
        dispatch(authError('bad login info'));
      )
  

【问题讨论】：

看到这个答案***.com/questions/43351752/…

我没有遇到和他一样的问题。如果 url 显示 localhost:3000/signup 或者我在 this.props.history 时点击刷新，我可以通过手动刷新来手动导航到这些页面.push('/post') 将 url 更改为 localhost:3000/post。这就是我必须在 url 中点击刷新或硬输入才能使其工作的问题。

话虽如此，用withRouter 包装你的组件，看看是否有帮助。它确实帮助了我

它仍然只是改变了 url 但视图没有改变。我将组件包装在组件文件中。这是正确的方法吗？

您还有其他解决方案吗？

【参考方案1】：

你可以试试这个，这应该可以。

this.history.pushState(null, '/posts');

如果您使用的是浏览器历史记录

  this.context.router.push('/posts');  or  browserHistory.push('/login');

【讨论】：

this.history 未定义。我正在使用 react-router-v4 或 react-router-dom，这意味着我正在使用 BrowserRouter

你试过这个 this.context.router.push('/posts');或 browserHistory.push('/login');

这两个都不起作用，我认为唯一可行的方法是如果我使用的是 react-router 版本 3，而我不是。我正在使用 react-router-dom 或 react-router 版本 4

【参考方案2】：

做到这一点的一种方法是在某处你有项目“isLoggedin”或类似的东西。如果该项目为 false，则您通常使用编辑框呈现登录路由以输入用户信息。当 isLoggedIn 状态更改为 true 时，您将登录路由呈现为如下所示：

<Redirect to="/posts"/>

你走吧！