在React Router中使用history.push()时需要刷新的问题

舒适60

我现在想在redux上成功登录时移动页面。我发现的方法是使用createBrowserHistory()所以我实现了它。然后使用临时页面将页面从redux移出history.push ("/Dashboard");它会更改url浏览器的,但是除非用户刷新它,否则它不会移动。我曾经createBrowserHistory ({forceRefresh: true})解决过这个问题。但这将刷新页面。(屏幕将闪烁。)因为使用了CRA,所以无法更改Webpack的设置。尝试解决此问题时该怎么办?

history.js

import { createBrowserHistory } from "history";

// export default createBrowserHistory({ forceRefresh: true });
export default createBrowserHistory();

index.js

/* import other modules... */
import { BrowserRouter as Router } from "react-router-dom";
import history from "./utils/history";

const logger = createLogger();
const sagaMiddleware = createSagaMiddleware({
  context: { history: history },
}); 

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(
      sagaMiddleware, 
      logger
    )
  )
);
sagaMiddleware.run(rootSaga); 
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById("root")
);

还原

/* import other modules... */
import history from "../utils/history";

/* code ... */
// redux-saga
export function* login(user) {
  try {
    const res = yield call(apiClient, {
      url: "/login",
      method: "post",
      data: user,
      timeout: 4000,
    });
    console.log(res);
  
    history.push("/Dashboard");
    yield put({
      type: LOGIN_SUCCESS,
      user: user, 
    });
  } catch (error) {
    console.error(error);
    yield put({
      type: LOGIN_ERROR,
      error: true,
    });
  }

App.js

function App() {
  return (
    <div className="App">
      <Switch>
        <AuthRoute path="/Dashboard/:id" component={Dashboard} />
        <AuthRoute exact={true} path="/Dashboard" component={Dashboard} />
        <Route path="/" component={LoginPage} />
        <Route path="/Loginpage" component={LoginPage} />
      </Switch>
    </div>
  );
}

Dashboard.js

function Dashboard(props) {
  let location = useLocation();
  console.log(location.pathname);
  const tableRender = () => {
    switch (location.pathname) {
      case "/case1": // pathname
        return <CommonTable />;
      case "/case2":
        return <CommonTable2 />;
    }
  };
  // const user = useSelector((state) => state.loginReducer.user, []);

  return (
    <>
      <GlobalHead />
      <Layout>
        <GlobalSide />
        <LocalSide />
        <Layout className="site-layout">
          <Content style={{ margin: "0 16px" }}>
            <SubHeader />
            <div className="Content-area">{tableRender()}</div>
          </Content>
          <GlobalFooter />
        </Layout>
      </Layout>
    </>
  );
}

export default Dashboard;
德鲁·里斯(Drew Reese)

加载并运行代码和框后,控制台中会显示一条警告,可立即清除问题所在。

警告:<BrowserRouter>忽略历史道具。要使用自定义历史记录,请使用import { Router }代替import { BrowserRouter as Router }

解决的办法是简单地使用Router而不是BrowserRouterin index.js

import { Router } from "react-router-dom"; // <-- import Router
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import createSagaMiddleware from "redux-saga";
import { createStore, applyMiddleware } from "redux";
import rootReducer, { rootSaga } from "./modules/index";
import history from "./utils/history";

const sagaMiddleware = createSagaMiddleware({
  context: { history: history }
});

const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  rootElement
);

使用历史记录在反应路由器中编辑需要刷新的问题

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在 react-router 中使用 history.push() 传递道具时出现问题

使用react-router-dom的history.push

如何使用React的Router v4 history.push()

使用React-Router在React中使用实例的URL问题

在React中使用react-router时组件消失

我在Laravel Mix中使用React Router刷新浏览器时收到错误404

在Redux中使用React Router时如何修复黑屏

如何使用Jest通过调用history.push来测试React-Router导航?

使用react-router v4的this.props.history.push打开窗口?

不确定如何使用react-router v4实现history.push

如何使用Jest模拟新的React Router Hooks的history.push

使用react-router的history.push()和自定义URL参数

当我在 webpack 中使用 react router 时,它显示错误“React.createElement: type is invalid”

React router history.push 回退到 404 路由

react-router重定向vs history.push

如果使用 history.push 访问特定路由,React-Router v5 不会重定向

React Router仅在刷新时显示组件

当使用来自react-router-dom的Link时,为什么在'History'上无法执行'pushState'?

在React-Router 2.0.0中使用自定义历史记录的问题

在react-native-router-flux中使用Actions.reset(“ key”)时,会影响组件的因素

当我刷新页面时,React组件消失(使用React Router)

使用GoDaddy上托管的React应用刷新页面时,react-router抛出404

在 Sublime 中使用 React 的问题

如何在Electron中使用React Router?

如何在React Router中使用HistoryLocation?

如何在React VR中使用React React Router?

我在 react 中使用 axios post 时遇到问题

在 React 中使用 find 函数时出现问题

使用React Router的网站中的斜线问题