Question

我的 React 应用程序中有一些路由，我描述路由中的任何 url 都重定向到 /404 页面，但它无法正常工作；当我刷新我的页面时，它会重定向到 /404 页面，甚至当我想转到 /（主页）时也会重定向到 /404 到 !以下是我的路线：

<Router>
      <Switch>
          <UserProvider>
             <PageLayout>
                <Route exact to="/" ><HomePage /></Route >
                <Route to="/product" ><Product /></Route >
                <Route to="/contactus" ><ContactUs /></Route >
                <Route to="/aboutus" ><AboutUs /></Route >
                <Route to="/404" ><NotFound /></Route >
                <Redirect from="/**/" to="/404" />
             </PageLayout >
          </UserProvider >
      </Switch>
</Router>

谁能告诉我我的问题是什么？

Answer 1

<Router>
  <Switch>
    <Route to="/" exact component={HomePage}/>
    <Route to="/product" exact component={Product}/>
    <Route to="/contactus" exact component={ContactUs}/>
    <Route to="/aboutus" exact component={AboutUs}/>
    <Route to="/*" exact component={NotFound}/>
  <Switch>
 <Router/>

试试这个。我认为它会起作用;)

Answer 2

问题如下：

<Router>
      <Switch>
        ...
        <Redirect from="/**/" to="/404" />
      </Switch>
</Router>

您将 /**/ 重定向到 /404

阅读这篇文章here

也许你应该这样做：

将 /**/ 更改为 * 并将您的路线重新排列为：

<Router>
      <Switch>
        ...
        <Redirect from="*" to="/404" />
        <Route to="/404" ><NotFound /></Route >
      </Switch>
</Router>

或者你可以直接使用 (如果 React 版本 >= 4)

<Redirect to="/404" />

React 路由器文档 here

在反应页面刷新将其重定向到 /404 页面

2 个答案: