时间戳

首页 > 解决方案 > 永无止境的加载而不是 NotFoundPage

reactjs - 永无止境的加载而不是 NotFoundPage

问题描述

在我的应用程序中，我创建了一个 NotFound 组件和适当的 NotFound 路由。当我请求类似locahost:3000/dfsdfdummyaddress或的地址时locahost:3000/post/dfsdfdummyaddress，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;

未找到页面：

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;

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;

标签： reactjs

解决方案

为什么？

您的示例路线匹配/profile/:id。

我假设您希望 react-router 知道“sdgsdfdummyaddress”是不合法的，它不能为您做，因此 react-router 的行为符合预期。

“post”版本不匹配，因为您的路线是复数 ( /posts/:id)。

解决方案

您可以使用一些策略来解决此问题。

如果找不到 ID，一种方法是重定向到专用的“未找到”路由。

Profile如果未找到 ID，另一种方法是在您的组件中显示相同的“未找到”组件。

推荐阅读