尝试此实现

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

不知道这是否会为您工作，因为我有一些第3方巴别塔 Package 器在使用中，但我逃脱声明我所有的路线，然后最后把

<Route path="/*" render={() => <SomeComponent /* possible prop injection */ />}/>

我经常用这个，但是你也可以用

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

我不经常使用这个，因为我喜欢在代码中使用更多的标志，但是我从https://tylermcginnis.com/react-router-handling-404-pages/中获得了上面的内容

React有一个名为“react-router-dom”的组件
因此，通过将路由封装在Switch中，React Router将只呈现第一个匹配的路由。这意味着所有其他不匹配的路由将通过指定一个没有属性的路由来捕获。请参见https://ui.dev/react-router-v4-handling-404-pages/

这里有一个班轮重定向所有其他路线（放置在所有其他路线之后）：

<Route path="/*" loader={() => redirect('/')} />

请尝试以下操作：〈路径路径="/”渲染={（）=〉（< SomeComponent />/ 可能的 prop 注入 /）} /〉
在这里，我捕获了所有不存在的路由，并将其推送到404组件：
〈路由路径="/”渲染={（）=〉（）} /〉
记住

• 路径= '/youreRoute'，但也= {['/']}属性化
• 完全匹配