Question

当我单击一些更改Urls但不更改视图或不渲染组件的链接时，我正在使用React And Redux来开发App，该问题直接影响到app。我的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);

我在这里为您提供有关您需要了解的代码的信息。请仔细阅读本指南和Ans来解决此问题，谢谢。

Answer 1

您在此处输入的链接没有正确的路径可能是问题所在吗？

严重卡住了React Router Issue URL的更改，但没有查看或渲染组件||反应|| Redux

1 个答案: