[英]React Router DOM - Redirect component does not render route properly
I realized this has been asked before, please bear with me since I am still learning this.我意识到以前有人问过这个问题,请多多包涵,因为我还在学习这个。 And I think I've tried all solutions in SO but without luck.
而且我想我已经尝试了 SO 中的所有解决方案,但没有运气。
The issue is : When PrivateRoute
redirects to /sign_in
, it's not rendering the expected component ( SignInForm
)问题是:当
PrivateRoute
重定向到/sign_in
时,它没有呈现预期的组件( SignInForm
)
I have implemented a PrivateRoute
as following;我已经实现了
PrivateRoute
如下;
PrivateRoute.js PrivateRoute.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Route, Redirect, withRouter } from "react-router-dom";
// Simplified and still can reproduce the issue;
class PrivateRoute extends Route {
render () {
return (<Redirect to="/sign_in" />);
}
}
PrivateRoute.propTypes = {
isAuthenticated: PropTypes.bool.isRequired,
};
const mapStateToProps = state => {
return {
isAuthenticated: !!state.user.token
};
};
export default withRouter(connect(mapStateToProps)(PrivateRoute));
And this is where I use it;这就是我使用它的地方;
index.js index.js
<div className="content position-relative">
<div className="content-container font-nunito">
<Switch>
<Route path="/sign_in" component={SignInForm} />
<Route exact path="/" component={LandingPage} />
<PrivateRoute path="/trips" component={TestPage} />
</Switch>
</div>
</div>
Few points to add into the question:有几点要补充到问题中:
PrivateRoute
(I tested this by changing the to
param to another route, and I see the URI changes in my browser).PrivateRoute
中确实发生了重定向(我通过将to
参数更改为另一个路由对此进行了测试,并且我在浏览器中看到了 URI 更改)。/sign_in
, it works fine ./sign_in
,它工作正常。 The only problem is only when <Redirect>
does it.<Redirect>
执行此操作时。 Here are my previous attempts that I have tried;这是我以前尝试过的尝试;
withRouter
in my PrivateRoute
- based on this answerPrivateRoute
withRouter
基于这个答案PrivateRoute
not to be pure
- based on this answerPrivateRoute
设置为pure
- 基于此答案Redirect
and withRouter
from react-router
instead of react-router-dom
react-router
而不是react-router-dom
导入Redirect
和withRouter
path-to-regexp@^2.4.0
path-to-regexp@^2.4.0
push
in Redirect
- Based on this answerRedirect
中使用push
- 基于此答案I am currently using react-router-dom@5.2.0
and react@^16.2.0
.我目前正在使用
react-router-dom@5.2.0
和react@^16.2.0
。
Please help, any suggestions is appreciated.请帮助,任何建议表示赞赏。 Let me know if I can provide more details.
让我知道我是否可以提供更多详细信息。
Edit: I've found the real issue, it seems like all the routes need to be wrapped inside BrowserRouter
.编辑:我发现了真正的问题,似乎所有路由都需要包装在
BrowserRouter
中。 So here's my final solution;所以这是我的最终解决方案;
<BrowserRouter>
<div className="content position-relative">
<div className="content-container font-nunito">
<Switch>
<Route path="/sign_in" component={SignInForm} />
<Route exact path="/" component={LandingPage} />
<PrivateRoute path="/trips" component={TestPage} />
</Switch>
</div>
</div>
</BrowserRouter>
Old:老的:
I solved it by downgrading react-router-dom
from 5.2.0
to 4.3.1
.我通过将
react-router-dom
从5.2.0
降级到4.3.1
解决了这个问题。
This seems to fix the issue with a bit of side-effect this issue这似乎解决了这个问题的一些副作用
So my final changes is;所以我最后的改变是;
package.json package.json
- "react-router-dom": "^5.2.0",
+ "react-router-dom": "^4.3.1",
index.js (To avoid the side effect) index.js (为了避免副作用)
<Switch>
<Route exact path="/" component={props => <LandingPage {...props} />} />
<Route path="/sign_in" component={props => <SignInForm {...props} />} />
<PrivateRoute path="/trips" component={props => <TestPage {...props} />} />
</Switch>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.