reactjs - 严重卡住 React Router 问题 URL 更改但未查看或渲染组件 || 反应||Redux

Question

当我单击我的一些更改 URL 但不更改视图或不渲染组件的链接时，我正在使用 React 和 Redux 开发应用程序，该问题直接影响应用程序。下面给出了我的 routeJs 或 Application.js 文件。

import React, { useEffect } from 'react';
import './App.css';
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 Register from './components/auth/Register';
import Login from './components/auth/Login';
import Alert from './components/layouts/Alert';
import { loadUser } from './actions/auth';
import { useDispatch } from 'react-redux';
import Dashboard from './components/dashboard/Dashboard';
import CreateProfile from './components/profile-form/CreateProfile';
import EditProfile from './components/profile-form/EditProfile';
import AddEducation from './components/profile-form/AddEducation';
import AddExperience from './components/profile-form/AddExperience';
import Profiles from './components/profiles/Profiles';
import Profile from './components/profile/Profile';
import Posts from './components/posts/Posts';
import PrivateRoute from './components/routing/PrivateRoute';

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 exact path="/profiles" component={Profiles} />
          <Route exact path="/profile/:id" component={Profile} />
          <PrivateRoute exact path="/dashboard" component={Dashboard} />
          <PrivateRoute exact path="/posts" component={Posts} />
          <PrivateRoute
            exact
            path="/create-profile"
            component={CreateProfile}
          />
          <PrivateRoute exact path="/edit-profile" component={EditProfile} />
          <PrivateRoute exact path="/add-education" component={AddEducation} />
          <PrivateRoute
            exact
            path="/add-experience"
            component={AddExperience}
          />
        </Switch>
      </section>
    </Router>
  );
};
export default App;

我在不同的平台上多次问过这个问题，得到了一些有价值的信息，但仍然无效。这是我的一个组件审查它的代码。

import React, { useEffect, Fragment } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { getCurrentUser } from '../../actions/profile';
import Spinner from '../layouts/Spinner';
import { Link, withRouter } from 'react-router-dom';
import DashboardActions from './DashboardActions';
import Experience from './Experience';
import Education from './Education';
import { deleteAccount } from '../../actions/profile';

const Dashboard = () => {
  const dispatch = useDispatch(() => getCurrentUser(), () => deleteAccount());
  const profileUser = useSelector(state => state.profile);
  const auth = useSelector(state => state.auth);
  const { profile, loading } = profileUser;
  const { user } = auth;

  useEffect(() => dispatch(getCurrentUser()), [dispatch]);
  return loading && profile === null ? (
    <Spinner />
  ) : (
    <Fragment>
      <h1 className="large text-primary">Dashboard</h1>
      <p className="lead">
        <i className="fa fa-user"></i>
        {'  '}Welcome {user && user.name}
      </p>
      {profile !== null ? (
        <Fragment>
          <DashboardActions />
          <Experience experience={profile.experience} />
          <Education education={profile.education} />
          <div className="my-2">
            <button
              className="btn btn-danger"
              onClick={() => dispatch(deleteAccount())}
            >
              Delete My Account!!!
            </button>
          </div>
        </Fragment>
      ) : (
        <Fragment>
          <p>You have not yet setup profile, please add some info</p>
          <Link to="/create-profile" className="btn btn-primary">
            Create Profile
          </Link>
        </Fragment>
      )}
    </Fragment>
  );
};
export default withRouter(Dashboard);

我在这里为您提供关于您需要知道的代码请查看此内容并回答以解决此问题谢谢..

标签： reactjsreduxreact-routerreact-router-v4react-router-dom