Reactjs 在react router中使用history.push（）时需要刷新的问题

现在我想在redux上成功登录时移动页面。我发现的方法是使用

createBrowserHistory（）

。所以我实现了它。然后使用临时的

history.push（“/Dashboard”）。它会更改浏览器的
url
，但除非用户刷新它，否则它不会移动。我使用
createBrowserHistory（{forceRefresh:true}）
来解决这个问题。但这将刷新页面。（屏幕将闪烁。）我无法更改网页的设置，因为我使用了CRA。当我试图解决这个问题时，我该怎么办

history.js

import { createBrowserHistory } from "history";

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

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

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

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;

index.js

import { createBrowserHistory } from "history";

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

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

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

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;

App.js

import { createBrowserHistory } from "history";

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

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

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

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;

函数应用程序（）{
返回(
);
}

Dashboard.js

import { createBrowserHistory } from "history";

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

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

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

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;

功能仪表板（道具）{
让location=useLocation（）；
console.log（location.pathname）；
constTableRender=（）=>{
开关（位置.路径名）{
案例“/case1”：//路径名
返回；
案例“/案例2”：
返回；
}
};
//const user=useSelector（（state）=>state.loginReducer.user，[]）；
返回(
{tableRender（）}
);
}
导出默认仪表板；
加载codesandbox并运行它后，控制台中会出现一条警告，立即说明问题所在

警告：
忽略历史记录道具。使用自定义
历史记录，使用
import{Router}
而不是
import{BrowserRouter as Router}

解决方案是在
index.js
中使用
Router
而不是
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 dom”导入{Router}；//如何渲染路线？您是否碰巧使用了多个路由上下文？你能告诉我们如何在
路由器中呈现你的应用程序吗？
？我在主体中添加了路由器呈现。你尝试过react Router dom提供的useHistory（）吗？这是一个js文件，不是jsx文件，因为移动页面的部分发生在redux中。这就是我不能使用useHistory（）的原因。您介意同时发布您的
仪表板
组件吗？您的路由定义有一些独特之处，我只想从根目录跟踪到您试图导航到的组件。谢谢！但它仍然不起作用。我还是不知道问题所在。@cozy60别担心。在上面添加了评论。非常感谢您的好意。非常感谢你解决了这个问题。你的帮助保存了我的代码。再次感谢你！