React Router 4 - 如果输入了损坏的 link 则路由到默认组件

Question

我正在研究 React Router 4。我有一些组件，例如 home, page1.., and page404。如果输入了损坏的 link，我想重定向到 page404。

            <Router>
                <AppContainer>
                    <Route exact path={HOME_URL} component={Home}/>
                    <Route path={SEARCH_RESULTS_URL} component={SearchResults}/>
                    <Route path={PAGE_404} component={Page404}/>
                </AppContainer>
            </Router>

谁能推荐一个方法。

Answer 1

文档似乎表明您必须将其包装在 <Switch>:

<Switch>
    <Route exact path={HOME_URL} component={Home}/>
    <Route path={SEARCH_RESULTS_URL} component={SearchResults}/>
    <Route component={PAGE_404}/>
</Switch>

Answer 2

开关是这样工作的，你给它一个带有渲染组件的路由到最后，在我的例子中，我只是 return 编辑了一个段落。因此，如果用户转到您定义的 404 页面以外的 URL，将 return

 <Router>
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route exact path='/about' component={About}/>
            <Route path='/about/results' component={Results}/>
            <Route path='/popular' component={Popular}/>
            <Route render={function () {
              return <p> 404 Page </p>
            }} />
          </Switch>
      </Router>

Answer 3

如果最后没有与此路径匹配，则捕获路由:

<Route component={page404} />

Answer 4

    const routes = (
     <BrowserRouter>
      <Switch>
        <Route path="/home" component={Home/>
        <Route path="/about" component={About}/>
        <Route path="*" component={NotFound}/>
      </Switch>
    </BrowserRouter>
   );

React Router 4 - 如果输入了损坏的 link 则路由到默认组件

React Router 4 - Route to a default component if a broken link has entered

reactjs

react-router

redux

react-router-v4