- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用与 react-router 4.x 兼容的下一个 (5.0.0-alpha.6) 版本 react-router-redux。我尝试在重定向到下一页时在 url 上设置参数。
每次移动到下一页。我意识到它调用了@LOCATION_CHANGE 2 次,in the second time it removes search value .如果我从按钮事件中处理它,它工作正常
import { requireAuth } from '../components/AuthenticatedComponent'
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
return (
<ConnectedRouter history={history}>
<div className="container">
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={requireAuth(About)} />
<Route path="/login" component={Login} />
<Route component={NotFound} />
</Switch>
</div>
</ConnectedRouter>
)
AuthenticatedComponent.js
import { push } from 'react-router-redux'
export function requireAuth(Component) {
class AuthenticatedComponent extends React.Component {
componentWillMount() {
this.checkAuth(this.props.isAuthenticated);
}
componentWillReceiveProps(nextProps) {
this.checkAuth(nextProps.isAuthenticated);
}
checkAuth(isAuthenticated) {
if (!isAuthenticated) {
let redirectAfterLogin = this.props.location.pathname;
this.props.dispatch(push({pathname: "/login", search:`?redirect=${redirectAfterLogin}`}))
}
}
//....
最佳答案
我认为你应该在 nextProps 中传递路径名。
class AuthenticatedComponent extends React.Component {
//...
componentWillReceiveProps(nextProps) {
this.checkAuth(nextProps.isAuthenticated); // <--- call checkAuth
}
checkAuth(isAuthenticated) {
if (!isAuthenticated) { // <-- isAuthenticated is in nextProps
// this.props.location.pathame is not in nextProps
let redirectAfterLogin = this.props.location.pathname;
this.props.dispatch(push({pathname: "/login", search:`?redirect=${redirectAfterLogin}`}))
}
}
//...
class AuthenticatedComponent extends React.Component {
componentWillMount() {
this.checkAuth(this.props);
}
componentWillReceiveProps(nextProps) {
this.checkAuth(nextProps); // <--- call checkAuth
}
checkAuth({isAuthenticated, location, dispatch}) {
if (!isAuthenticated) {
let redirectAfterLogin = location.pathname;
dispatch(push({pathname: "/login", search:`?redirect=${redirectAfterLogin}`}))
}
}
//...
关于javascript - React-Router-Redux 分派(dispatch) LOCATION_CHANGE 两次,删除搜索值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46181168/
我正在努力让我的 React/Redux 应用根据操作更新 URL。我四处看了看。我以为我已经掌握了它,但显然我遗漏了一些东西。我还有其他正确响应的 reducer 。 目前,我只是想记录操作。 路由
我在点击react-router 时遇到问题成分。目前,单击它时会导航到正确的页面,但 redux 中没有触发任何操作。 )。 历史对象更新。我可以这么说,因为后退/前进按预期工作(在 redux-l
根据 the documentation我应该能够通过调用 push('/with/the/path') 来触发 LOCATION_CHANGE 事件。来自文档的示例: import { router
我正在使用与 react-router 4.x 兼容的下一个 (5.0.0-alpha.6) 版本 react-router-redux。我尝试在重定向到下一页时在 url 上设置参数。 每次移动到下
我是一名优秀的程序员,十分优秀!