React路由器dom更改url，不渲染组件答案

【问题标题】：React router dom changes url, does not render componentReact路由器dom更改url，不渲染组件
【发布时间】：2021-10-16 13:39:56
【问题描述】：

我正在使用"react-router": "^5.2.1" 和"react-router-dom": "^5.3.0"，当我使用history.push() 时，我可以看到浏览器更改了URL，但它没有呈现我的组件在路径上侦听。它仅在我刷新页面时呈现。当我使用history.push 尝试在用户单击按钮时重定向用户时，这也会发生在各个页面中。任何关于我正在做什么的建议/建议将不胜感激。

我已经尝试使用 withRouter() 包装我的 App 导出，但没有任何变化。我还将我的路线包裹在<Switch>

我也在我的子页面中使用钩子。

这就是我的 App.js 的样子：

import React ,{ useState, useEffect } from "react";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, withRouter, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";
import JsonData from "./data/data.json";
import axios from "axios";

const App = () => {
  const [landingPageData, setLandingPageData] = useState({});
  useEffect(() => {
    setLandingPageData(JsonData);
  }, []);

  const { user: currentUser } = useSelector(state => state.auth);

  const hist = createBrowserHistory();

  return (
    <Router history={hist}>
      {currentUser ? (
        <div>
          <Layout>
            <Switch>
              <Route path="/home" render={() => <Header data={landingPageData.Header} />} />
              <Route path="/destinations" render={() => <Destinations data={landingPageData.Destinations} />} />
            </Switch>
          </Layout>
        </div>
      ) : (
        <div>
          <Layout >
            <Switch>
              <Route path="/register-page" component={Register} />
              <Route path="/login" component={Login} />
            </Switch>
          </Layout>
        </div>
      )}
    </Router>
  );
};

export default App;

我的 index.js ：

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import { Provider } from "react-redux";
import { createBrowserHistory } from "history";
import * as serviceWorker from './serviceWorker';
import { store, persistor } from "./store";
import { PersistGate } from "redux-persist/integration/react";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

【问题讨论】：

这里的<Layout> 组件是什么？
它由我的页眉和页脚组成。

标签： javascript reactjs

【解决方案1】：

React 路由器 DOM 导出 BrowserRouter 而不是 Router。您使用了Router 而不是BrowserRouter。

更改您的 App.js

import React ,{ useState, useEffect } from "react";
import { createBrowserHistory } from "history";
import { BrowserRouter, Route, Switch, withRouter, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";
import JsonData from "./data/data.json";
import axios from "axios";

const App = () => {
  const [landingPageData, setLandingPageData] = useState({});
  useEffect(() => {
    setLandingPageData(JsonData);
  }, []);

  const { user: currentUser } = useSelector(state => state.auth);

  const hist = createBrowserHistory();

  return (
    <BrowserRouter history={hist}>
      {currentUser ? (
        <div>
          <Layout>
            <Switch>
              <Route path="/home" render={() => <Header data={landingPageData.Header} />} />
              <Route path="/destinations" render={() => <Destinations data={landingPageData.Destinations} />} />
            </Switch>
          </Layout>
        </div>
      ) : (
        <div>
          <Layout >
            <Switch>
              <Route path="/register-page" component={Register} />
              <Route path="/login" component={Login} />
            </Switch>
          </Layout>
        </div>
      )}
    </BrowserRouter>
  );
};

export default App;

【讨论】：