Question

我有一个路由文件，其中包含多个这样的路由

const RouteUI = ({context}) =>
  <Switch>
  <React.Fragment>

    <SDPRouteUI context={context} />

    <SDPMRouteUI context={context} />

    <ACRouteUI context={context} />

    <DCRouteUI context={context} />

    <Route path=""
      render={() =>
        <NotFound context={context} />
      }
    />

  </React.Fragment>

  </Switch>

NotFound组件将在每个页面上呈现，即使它位于开关内部。

SDPRouteUI，SDPMRouteUI..etc是其他路由文件，例如

const SDPRouteUI = ({context}) =>
  <Switch>
    <Route exact path='/sdp/account'
      render={() =>
        <SDPAccountPageSF context={context} />
      }
    />

    <Route exact path='/sdp/activate/back'
      render={() =>
        <SDPActivateBackSF context={context} />
      }
    />
<Switch>

Answer 1

顶级Switch语句不起作用，因为将自动呈现第一个非Route元素（在您的情况下为React.Fragment）。即使将Switch元素移动到React.Fragment之间，它也不会像其他默认组件那样呈现。

为了处理嵌套路由，您需要具有提供者/消费者模式。请参考 this answer 以正确处理404路由

Answer 2

onClick，也许可以解决您的问题

如果您定义了没有“ path”属性的任何路由，则开关组件将自动移动到NotFound组件。

@IBOutlet weak var placeholder: UIView! var stillImageOutput = AVCaptureStillImageOutput() for face in faces { //somewhere in here called faceDetected() method } func faceDetected() -> Void { let tapped = UITapGestureRecognizer(target:self,action:#selector(saveToCamera)) placeholder.addGestureRecognizer(tapped) placeholder.isUserInteractionEnabled = true } @objc func saveToCamera(_ sender: UIGestureRecognizer) { if let videoConnection = stillImageOutput.connection(with: AVMediaType.video) { stillImageOutput.captureStillImageAsynchronously(from: videoConnection) { (imageDataSampleBuffer, error) -> Void in let imageData = AVCaptureStillImageOutput.jpegStillImageNSDataRepresentation(imageDataSampleBuffer!) UIImageWriteToSavedPhotosAlbum(UIImage(data: imageData!)!, nil, nil, nil) } } }，可能会更有用。对于确切的路线。

Answer 3

在React Router中实现404很简单。在React Router组件内部，创建未定义路径的路由。并确保将代码放在所有路由的底部，以便路由器将检查所有路由并在找不到匹配项时进行回退。

<Router>
   <Link to="/users">Users</Link>
   <Link to="/search?q=react">Search</Link>
   <Route exact path="/about" component={AboutPage} />
   <Route exact path="/search" component={SearchPage} />
   <Route component={NoMatchPage} />
</Router>

访问任何随机URL，您将看到一个简单的404页面。但是，等等，让我们检查其他页面是否正常运行而不中断。不会的！检查关于链接，您将同时看到About和404页面。因为第一个路由器匹配/ about路径的确切路由，然后它穿越到底部并加载404路由，因为该路由没有定义路径。 React Router提供了一个称为Switch的组件，该组件在路由解析后会中断，并且不会在其下方加载任何其他路由组件。它相当容易实现。将所有路由封装在Switch组件内。让我们做到这一点，并使404页面正常运行。

import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Switch>
          <Route exact path="/" component={IndexPage} />
          ...
          <Route exact path="/search" component={SearchPage} />
          <Route component={NoMatchPage} />
        </Switch>
      </Router>
    </section>
  );
};

...

此Switch组件将检查匹配的路由，如果已匹配一条路由，则会中断检查下一条路由的过程。这样，我们将避免为所有页面呈现404路由。

React中的404页面在每个页面中呈现

3 个答案: