react router中使用history.push()时需要刷新的问题

Question

我现在想在redux上登录成功后移动页面。我发现的方法是使用createBrowserHistory()。所以我实施了它。然后使用临时 history.push ("/Dashboard"); 从 redux 移动该页面。它改变了浏览器的url，但它不会移动，除非用户刷新它。我用 createBrowserHistory ({forceRefresh: true}) 来解决这个问题。但这会刷新页面。（屏幕会闪烁。）我无法更改 webpack 的设置，因为我使用了 CRA。当我试图解决这个问题时我该怎么做？

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

redux

/* 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;

Answer 1

加载您的 codesandbox 和运行后，控制台中会出现一条警告，可立即说明问题所在。

Warning: <BrowserRouter> ignores the history prop. To use a custom history, use import { Router } instead of import { BrowserRouter as Router }.

解决方案是简单地使用 Router 而不是 index.js 中的 BrowserRouter。

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

react router中使用history.push()时需要刷新的问题

Problems that need to be refreshed when using history.push() in react router

reactjs

redux

redux-saga