Redux not Working With React Router || Change Url not View || tried withRouter But not statisfy use on correct Component

Question

This is My App.js where all the Routes define Under Router. It's work fine when i jump from one Link to other in those component that are not using redux. but when i click on Redux connected component it's render component but then when i click on any other Link they just change Url Not view. This is App js File:-

 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;

Both Register And LogIn Workimg well when navigating through each other but when I jump to component that using redux profiles, it loads and work but after that when i want to jump from profiles to Register login they just change url not view. this is My profiles file that using redux and creating issue.

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

And These are My Login And Register component that are working well when navigate to each other. when they go to profiles after that when i click on link of them they just change urls in address bar but not changing view. It's Login page Register is similar to this..

  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;

I searched this alot and mostly got ans use withRouter I tried that one as u can see but still not working or maybe i am not using withRouter on correct component.

I'll do Provide any other information that you need to know about my code if you want and I am using react-redux hooks instead of using connect

Answer 1

I had faced the same problem in the past.
At that time I solve this issue with connected-react-router.
this is how to use the connected-react-router.
how to use connected-react-router