Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript React Router Redux调度位置\u更改两次,删除搜索值_Javascript_Reactjs_Redux_React Redux_React Router Redux - Fatal编程技术网

Javascript React Router Redux调度位置\u更改两次,删除搜索值

Javascript React Router Redux调度位置\u更改两次,删除搜索值,javascript,reactjs,redux,react-redux,react-router-redux,Javascript,Reactjs,Redux,React Redux,React Router Redux,我正在使用下一个(5.0.0-alpha.6)版本react router redux,它与react router 4.x兼容。 我尝试在url上设置参数,同时重定向到下一页 每次它移动到下一页时。我意识到它调用@LOCATION\u CHANGE 2次。如果我从button事件处理它,它工作得很好 import { requireAuth } from '../components/AuthenticatedComponent' import createHistory from 'hist

我正在使用下一个(5.0.0-alpha.6)版本react router redux,它与react router 4.x兼容。 我尝试在url上设置参数,同时重定向到下一页

每次它移动到下一页时。我意识到它调用@LOCATION\u CHANGE 2次。如果我从button事件处理它,它工作得很好

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>
  )

}

我认为您应该在下一步中传递路径名

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}`}))
    }
 }

//...
类AuthenticatedComponent扩展了React.Component{
//...
组件将接收道具(下一步){

this.checkAuth(nextrops.isAuthenticated);//不再维护。为了满足您的Redux路由器与React Router 4+的同步需求,让我们改用r库来解决此问题。

为了防止有人遇到类似问题,我使用了连接的React Router
库,而推送导致了双
位置更改
要触发的事件。第一个事件将具有正确的搜索参数,而第二个事件将清除它。我的问题是,我正在从
反应路由器dom将按钮渲染为
链接
,如下所示:

<Button
  as={Link}
  basic
  className={styles.basicTealButton}
  onClick={this.handleButtonClick}
>
...

...

一旦我摆脱了
as={Link}
部分,一切都很好。

谢谢你的回复,但这似乎对我不起作用
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}`}))
    }
 }

//...
<Button
  as={Link}
  basic
  className={styles.basicTealButton}
  onClick={this.handleButtonClick}
>
...