Redux не работает с React Router ||Изменить URL не виден ||пробовал с роутером но не проверял использование на правильном компоненте

Question

Это My App.js, где все маршруты определены в разделе «Маршрутизатор». Это нормально работает, когда я перехожу с одной ссылки на другую в тех компонентах, которые не используют избыточность. но когда я нажимаю на подключенный компонент Redux, это компонент рендеринга, но затем, когда я нажимаю на любую другую ссылку, они просто меняют вид URL, а не вид. Это файл приложения js: -

 import React, { useEffect, Fragment } from "react";
 import { Router, Route, Switch } from "react-router-dom";
 import history from "./history";
 import Navbar from "./components/layouts/Navbar";
 import Landing from "./components/layouts/Landing";
 import Profiles from "./components/profiles/Profiles";
 import Login from "./components/auth/Login";
 import Register from "./components/auth/Register";
 import { loadUser } from "./actions/auth";
 import { useDispatch } from "react-redux";

  const App = () => {
     const dispatch = useDispatch(() => loadUser());
       useEffect(() => {
         dispatch(loadUser());
     }, [dispatch]);
 return (
  <Router history={history}>
    <Navbar />
      <Route exact path='/' component={Landing} />
        <section className='container'>
         <Alert />
          <Switch>
            <Route exact path='/register' component={Register} />
            <Route exact path='/login' component={Login} />
            <Route path='/profiles' component={Profiles} />
          </Switch>
        </section>
      </Router>
     );
    };
 export default App;

И регистрация, и вход хорошо работают при навигации друг по другу, но когда я перехожу к компоненту, использующему профили редукса, он загружается и работает, но после этого, когда я хочу перейтииз профилей, чтобы зарегистрировать логин они просто меняют URL, а не видят. Это файл «Мои профили», в котором используется редукция и проблема.

import React, { Fragment, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getProfiles } from "../../actions/profile";
import Spinner from "../layouts/Spinner";
import ProfileItems from "./ProfileItems";
import { withRouter } from "react-router-dom";

const Profiles = () => {
 const profile = useSelector(state => state.profile);
  const { profiles, loading } = profile;
  const dispatch = useDispatch(() => getProfiles());

useEffect(() => dispatch(getProfiles()), [dispatch]);

  return (
    <Fragment>
       {loading ? (
       <Spinner />
       ) : (
       <Fragment>
        <h1 className='large text-primary'>Developers</h1>
        <p className='lead'>
        <i className='fab fa-connectdevelop'></i> Browse and Connect With
        Developers...
        </p>
       <div className='profiles'>
        {profiles.length > 0 ? (
          profiles.map(profile => (
            <ProfileItems key={profile._id} profile={profile} />
          ))
          ) : (
          <h4>profile not Found !!!...</h4>
         )}
        </div>
      </Fragment>
      )}
    </Fragment>
    );
  };

export default withRouter(Profiles);

И это компонент Мой логин и регистр, который хорошо работает при переходе друг к другу. когда они переходят в профили после этого, когда я нажимаю на их ссылку, они просто меняют URL в адресной строке, но не меняют вид. Это страница входа в систему Регистрация похожа на это ..

  import React, { Fragment, useState } from "react";
  import { useDispatch, useSelector } from "react-redux";
  import { login } from "../../actions/auth";
  import { Link, Redirect } from "react-router-dom";


   const Login = () => {
    const dispatch = useDispatch(() => login());
    const isAuthenticated = useSelector(state 
     =>state.auth.isAuthenticated);
    const [formData, setFormData] = useState({
     email: "",
     password: ""
     });

     const { email, password } = formData;
     const onChange = e => {
     setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
   };

   const onSubmit = e => {
    e.preventDefault();
    dispatch(login(email, password));
     };
    if (isAuthenticated) {
     return <Redirect to='/dashboard' />;
     }
    return (
      <Fragment>
       <h1 className='large text-primary'>Sign In</h1>
        <p className='lead'>
         <i className='fas fa-user'>Sign In Your Account!!!</i>
       </p>
      <form onSubmit={e => onSubmit(e)} className='form'>
        <div className='form-group'>
       <input
         type='email'
         name='email'
         placeholder='Enter Your Email'
         value={email}
         onChange={e => onChange(e)}
        />
       </div>
       <div className='form-group'>
        <input
         type='password'
         name='password'
         placeholder='Enter Your Password'
         value={password}
         onChange={e => onChange(e)}
        />
       </div>
       <div className='form-group'>
       <input type='submit' value='LogIn' className='btn btn-primary' />
      </div>
     </form>
     <p className='my-1'>
       Don't have an Account <Link to='/register'>Sign Up</Link>
     </p>
   </Fragment>
  );
 };

export default Login;

Я много раз искал это и чаще всего пользовался и использую с Router Я пробовал это, как вы можете видеть, но все еще не работает, или, возможно, я не использую withRouter на правильномcomponent.

Я сделаю. Предоставьте любую другую информацию, которую вам нужно знать о моем коде, если хотите, и я использую react-redux перехватчики вместо connect

Answer 1

В прошлом я сталкивался с той же проблемой.
В то время я решал эту проблему с помощью connected-react-router.
. Как использовать connected-react-router.
, как использоватьподключено реагирующий-маршрутизатор