React router dom 更改 url，不渲染組件

Question

我正在使用"react-router": "^5.2.1"和"react-router-dom": "^5.3.0" ，當我使用history.push()時，我可以看到瀏覽器更改為 URL，但是它不會呈現我的組件在路徑上偵聽。 它僅在我刷新頁面時呈現。 當我使用history.push嘗試在用戶單擊按鈕時重定向用戶時，這也會發生在單個頁面中。 任何關於我正在做的事情的建議/建議將不勝感激。

我已經嘗試過使用 withRouter() 包裝我的應用程序導出，但沒有任何變化。 我還將我的路線包裝在<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;

我的索引.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();

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

Answer 2

您需要從react-router-dom導入BrowserRouter ，然后將其用作：

import { BrowserRouter as Router } from "react-router-dom";

您需要更改App.js的 import 語句，如下面的代碼所示：

import React ,{ useState, useEffect } from "react";
import { createBrowserHistory } from "history";
import { BrowserRouter as Router, Route, Switch, withRouter, Redirect } from "react-router-dom"; // <-- change import statement
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;