Блог

Я использую "react-router": "^5.2.1" , и "react-router-dom": "^5.3.0" когда я использую history.push() , я вижу, что браузер изменяет URL-адрес, но он не отображает мой компонент, прослушивающий путь. Он отображается только в том случае, если я обновляю страницу. Это также происходит на отдельных страницах, когда я history.push пытаюсь перенаправить пользователя, когда он нажимает кнопку. Любые советы/ рекомендации по поводу того, что я делаю, будут оценены по достоинству.

Я уже пытался обернуть экспорт приложения с помощью withRouter (), но изменений нет. Я также завернул свои маршруты в lt;Switchgt;

Я также использую крючки на своих дочерних страницах.

Вот как мой 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 = () =gt; {  const [landingPageData, setLandingPageData] = useState({});  useEffect(() =gt; {  setLandingPageData(JsonData);  }, []);   const { user: currentUser } = useSelector(state =gt; state.auth);   const hist = createBrowserHistory();   return (  lt;Router history={hist}gt;  {currentUser ? (  lt;divgt;  lt;Layoutgt;  lt;Switchgt;  lt;Route path="/home" render={() =gt; lt;Header data={landingPageData.Header} /gt;} /gt;  lt;Route path="/destinations" render={() =gt; lt;Destinations data={landingPageData.Destinations} /gt;} /gt;  lt;/Switchgt;  lt;/Layoutgt;  lt;/divgt;  ) : (  lt;divgt;  lt;Layout gt;  lt;Switchgt;  lt;Route path="/register-page" component={Register} /gt;  lt;Route path="/login" component={Login} /gt;  lt;/Switchgt;  lt;/Layoutgt;  lt;/divgt;  )}  lt;/Routergt;  ); };  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(  lt;React.StrictModegt;  lt;Provider store={store}gt;  lt;PersistGate persistor={persistor}gt;  lt;App /gt;  lt;/PersistGategt;  lt;/Providergt;  lt;/React.StrictModegt;,  document.getElementById('root') );  serviceWorker.unregister();    

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 = () =gt; {  const [landingPageData, setLandingPageData] = useState({});  useEffect(() =gt; {  setLandingPageData(JsonData);  }, []);   const { user: currentUser } = useSelector(state =gt; state.auth);   const hist = createBrowserHistory();   return (  lt;BrowserRouter history={hist}gt;  {currentUser ? (  lt;divgt;  lt;Layoutgt;  lt;Switchgt;  lt;Route path="/home" render={() =gt; lt;Header data={landingPageData.Header} /gt;} /gt;  lt;Route path="/destinations" render={() =gt; lt;Destinations data={landingPageData.Destinations} /gt;} /gt;  lt;/Switchgt;  lt;/Layoutgt;  lt;/divgt;  ) : (  lt;divgt;  lt;Layout gt;  lt;Switchgt;  lt;Route path="/register-page" component={Register} /gt;  lt;Route path="/login" component={Login} /gt;  lt;/Switchgt;  lt;/Layoutgt;  lt;/divgt;  )}  lt;/BrowserRoutergt;  ); };  export default App;