当我点击locathost:3000/faq或任何其他有效路由时，React会在页面底部显示有效路由内容和NotFound(基本上是404自定义页面)组件.我希望仅在遇到无效路由时才显示NotFound组件内容 Ex: localhost:3000/not-existing-url

const routes = [
  {
    path: '/',
    component: HomePage,
    is_private: false,
  },
  {
    path: '/faq',
    component: RedirectFaqToSupport,
    is_private: false,
  },
  {
    path: '/about-us',
    component: About,
    is_private: false,
  },
  {
    path: '/contact-us',
    component: Contact,
    is_private: false,
  },
 {
    component: NotFound,
    is_private: false,
    path: '*'
  },
]

这是我的App.js组件代码.

class App extends Component {
  constructor() {
    super()
    this.state = {
      redirectToReferrer: false, // may not need this anymore
    }
  }

  render() {
    const { isMobile } = this.props

    const renderLoader = () => (
      <Columns.Column size={12}>
        <div className="has-text-centered" style={{ marginTop: '15%' }}>
          <i className="fas fa-3x fa-cog fa-spin"></i>
        </div>
      </Columns.Column>
    )

    return (
      <Suspense fallback={renderLoader()}>
        <BrowserRouter>
          <Provider>
            <ScrollToTop />
            <Subscribe to={[AppContainer]}>
              {(auth) => {
                return (
                  <>
                    <Header
                      isAuth={auth.state.isAuth}
                      modalViewType={auth.state.modalViewType}
                      unreadMessageCount={auth.state.unreadMessageCount}
                      auth={auth}
                    />
                    <ErrorBoundary>
                      <div className="page-master-container">
                        <Switch>
                          <BuildRoutes
                            isMobile={isMobile}
                            isAuth={auth.state.isAuth}
                            auth={auth}
                          />
                        </Switch>
                      </div>
                    </ErrorBoundary>
                    <Footer isAuth={auth.state.isAuth} />
                  </>
                )
              }}
            </Subscribe>
          </Provider>
        </BrowserRouter>
      </Suspense>
    )
  }
}

以下是BuidRoutes个部件代码

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      rest.isAuth === true ? (
        <Component {...props} {...rest} />
      ) : (
        <Redirect
          to={{
            pathname: '/login',
            state: { from: props.location },
          }}
        />
      )
    }
  />
)

export const BuildRoutes = ({ isMobile, isAuth, auth }) => {
  const location = useLocation()

  useEffect(() => {
    const queryParams = QueryString.parse(location.search)
    setFeatureFlag(queryParams)
  }, [location])

  return (
    <>
      {routes.map(
        ({ path, component: Component, is_private, is_mother }, key) =>
          !is_private ? (
           
              <Route
                exact={is_mother ? false : true}
                path={path}
                key={key}
                render={(props) => (
                  <Component
                    {...props}
                    isMobile={isMobile}
                    isAuth={isAuth}
                    auth={auth}
                  />
                )}
              />
           
          ) : (
            
              <PrivateRoute
              isAuth={isAuth}
              isMobile={isMobile}
              auth={auth}
              exact={is_mother ? false : true}
              path={path}
              key={key}
              component={Component}
            />
    
            
          )
      )}
      <Route
        exact
        path="/brand/:brandName"
        render={(props) => {
          const { brandName } = props.match.params
          if (bikeBrands.includes(brandName)) {
            return <Redirect to={`/brand/${brandName}-rental`} />
          }
          return <BrandLandingPage brandName={brandName} />
        }}
      />
    </>
  )
}

注:我也try 了下面的方法，但没有帮助.仍显示未找到组件和有效路径组件

export const BuildRoutes = ({ isMobile, isAuth, auth }) => {
  const location = useLocation()

  useEffect(() => {
    const queryParams = QueryString.parse(location.search)
    setFeatureFlag(queryParams)
  }, [location])

  return (
    <>
      {routes.map(
        ({ path, component: Component, is_private, is_mother }, key) =>
          !is_private ? (
            <Route
              exact={is_mother ? false : true}
              path={path}
              key={key}
              render={(props) => (
                <Component
                  {...props}
                  isMobile={isMobile}
                  isAuth={isAuth}
                  auth={auth}
                />
              )}
            />
          ) : (
            <PrivateRoute
              isAuth={isAuth}
              isMobile={isMobile}
              auth={auth}
              exact={is_mother ? false : true}
              path={path}
              key={key}
              component={Component}
            />
          )
      )}
      <Route
        component={NotFound}
      />
      <Route
        exact
        path="/brand/:brandName"
        render={(props) => {
          const { brandName } = props.match.params
          if (bikeBrands.includes(brandName)) {
            return <Redirect to={`/brand/${brandName}-rental`} />
          }
          return <BrandLandingPage brandName={brandName} />
        }}
      />
    </>
  )
}

I am using "react-router-dom": "^5.2.0",个