Reactjs 从不继续加载，而不是NotFoundPage

在我的应用程序中，我创建了一个NotFound组件和相应的NotFound路由。当我请求类似于

locahost:3000/dfsdummyaddress

或

locahost:3000/post/dfsdummyaddress

的地址时，NotFound页面将显示它应该显示的内容。但是，如果我请求一个类似于

localhost:3000/profile/sdgsdfdummyaddress

（地址为

profile

）的地址，我只会得到不间断的加载。 我做错了什么

包含以下路径的文件：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Register from '../auth/Register';
import Login from '../auth/Login';
import Alert from '../layout/Alert';
import Dashboard from '../dashboard/Dashboard';
import CreateProfile from '../profile-forms/CreateProfile';
import EditProfile from '../profile-forms/EditProfile';
import AddExperience from '../profile-forms/AddExperience';
import AddEducation from '../profile-forms/AddEducation';
import Profiles from '../profiles/Profiles';
import Profile from '../profile/Profile';
import Posts from '../posts/Posts';
import Post from '../post/Post';
import NotFound from '../layout/NotFound';
import PrivateRoute from '../routing/PrivateRoute';

const Routes = () => {
    return (
        <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='/create-profile' component={CreateProfile} />
                <PrivateRoute exact path='/edit-profile' component={EditProfile} />
                <PrivateRoute exact path='/add-experience' component={AddExperience} />
                <PrivateRoute exact path='/add-education' component={AddEducation} />
                <PrivateRoute exact path='/posts' component={Posts} />
                <PrivateRoute exact path='/posts/:id' component={Post} />
                <Route component={NotFound} />
            </Switch>
        </section>
    );
}

export default Routes;

从“React”导入React；
从“react router dom”导入{Route，Switch}；
从“../auth/Register”导入寄存器；
从“../auth/Login”导入登录名；
从“../layout/Alert”导入警报；
从“../Dashboard/Dashboard”导入仪表板；
从“../profile forms/CreateProfile”导入CreateProfile；
从“../profile forms/EditProfile”导入EditProfile；
从“../profile forms/AddExperience”导入AddExperience；
从“../profile forms/AddEducation”导入AddEducation；
从“../Profiles/Profiles”导入配置文件；
从“../Profile/Profile”导入配置文件；
从“../Posts/Posts”导入帖子；
从“../Post/Post”导入Post；
从“../layout/NotFound”导入NotFound；
从“../routing/PrivateRoute”导入PrivateRoute；
常数路由=（）=>{
返回(
);
}
导出默认路径；

未找到的页面：

import React, { Fragment } from 'react';

const NotFound = () => {
  return (
    <Fragment>
      <h1 className='x-large text-primary'>
        <i className='fas fa-exclamation-triangle' /> Page Not Found
      </h1>
      <p className='large'>Sorry, this page does not exist</p>
    </Fragment>
  );
};

export default NotFound;

import React，{Fragment}来自'React'；
const NotFound=（）=>{
返回(
找不到页面
对不起，此页面不存在
);
};
未找到导出默认值；

App.jsx文件：

import './App.css';
import React, { Fragment, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Landing from './components/layout/Landing';
import Routes from './components/routing/Routes';

import { Provider } from 'react-redux';
import store from './store';
import { loadUser } from './actions/auth';
import setAuthToken from './utils/setAuthToken';

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = () => {
  useEffect(() => {
     store.dispatch(loadUser());
  }, []);
  
  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Navbar />
          <Switch>
            <Route exact path='/' component={Landing} />
            <Route component={Routes} />
          </Switch>
        </Fragment>
      </Router>
    </Provider>
  );
};

export default App;

import'/App.css'；
从“React”导入React，{Fragment，useffect}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./components/layout/Navbar”导入导航栏；
从“./components/layout/Landing”导入平台；
从“./components/routing/Routes”导入路由；
从'react redux'导入{Provider}；
从“./store”导入存储；
从“./actions/auth”导入{loadUser}；
从“/utils/setAuthToken”导入setAuthToken；
if（localStorage.token）{
setAuthToken（localStorage.token）；
}
常量应用=（）=>{
useffect（（）=>{
store.dispatch（loadUser（））；
}, []);
返回(
);
};
导出默认应用程序；

为什么？ 您的示例路线与

/profile/：id

匹配

我假设您希望react路由器知道“sdgsdfdummyaddress”是不合法的，它不能为您这样做，所以react路由器的行为符合预期

“post”版本不匹配，因为您的路线是复数的（

/posts/：id

）

解决 有几个策略可以用来解决这个问题

如果找不到ID，可以重定向到专用的“未找到”路由

另一种方法是，如果找不到ID，则在

配置文件中显示相同的“未找到”组件