Question

我的React路由定义如下：

...
<Route component={Header} />
<Route exact path="/" component={Landing} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={Footer} />
...

我想定义一条“全部捕获”路由，以捕获与着陆，“关于”或“联系”路由不匹配的所有内容，而是重定向到“ 404找不到”页面。我该如何使用React Router 4？

Answer 1

尝试此实现

const AppRouter = (props) => {
        return (
            <BrowserRouter>
                <div>
                    <Header />
                    <Switch>
                        <Route component={Header} />
                        <Route exact path="/" component={Landing} />
                        <Route path="/about" component={About} />
                        <Route path="/contact" component={Contact} />
                        <Route component={Footer} />
                        <Route component={NotFoundPage} />
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }

Answer 2

不确定，因为我正在使用一些第三方通天塔包装纸，所以这是否对您有用，但是我无法声明所有路线然后最后放置

<Route render={() => <SomeComponent />} />

我已经相当频繁地使用它了，但是您也可以使用

 <Classrooms>
  <Classroom ID="Mrs.S">
   <Students>
    <Student>
     <Name> Billy Blue </Name>
     <Grade> 1 </Grade>
     <Sex> Male </Sex>
     <Age> 7 </Age>
     <Picture> c:/School/Students/BillyBlue </Picture>
   </Student>
  </Students>
 </Classroom>
</Classrooms>

我使用的不是很多，因为我希望在代码中使用更多地标，但是我从上面得到了上述内容 https://tylermcginnis.com/react-router-handling-404-pages/

Answer 3

React 有一个名为 switch 的组件来自 'react-router-dom'

因此，通过将您的 Routes 包装在 Switch 中，React Router 将仅呈现匹配的第一个 Route。这意味着将通过指定没有属性的路由来捕获所有其他不匹配的路由。见https://ui.dev/react-router-v4-handling-404-pages/

Answer 4

试试这个： ( < SomeComponent /> / 可能的 prop 注入 */ )} />

在这里，我捕捉到所有不存在的路由结束将其推送到 404 组件：

( )} />

记住

path = '/youreRoute' 但也 = {['/']} 归因
exact = 完全匹配 www.miyamotto.net

React-Router 4捕获所有路由

4 个答案: