REGEXP帮助需要渲染404路径

Question

我正在尝试使用 REGEXP 帮助使用路径在反应应用程序中呈现 404 页面。我想不通。

这是我想要的正则表达式；我想匹配 IF：

• 整个路径是 !== '/' && 不包含单词 'article'。

编辑：包括澄清代码：

<Switch location={location} key={location.pathname}>
        <Route path={["/commentisfree/article/:id", "/commentisfree"]}>
          <Opinion />
        </Route>
        <Route path={["/sport/article/:id", "/sport"]}>
          <Sport />
        </Route>
        <Route path={["/culture/article/:id", "/culture"]}>
          <Culture />
        </Route>
        <Route path={["/lifestyle/article/:id", "/lifestyle"]}>
          <Lifestyle />
        </Route>
        <Route path={["/signup", "/login"]}>
          <Account />
        </Route>
        <Route path={["search/:search", "/search"]}>
          <Search />
        </Route>

        <Route path={/REGEXP[if path !== "/" && path does NOT include the word "article"]/} component={ErrorDefault} />

        <Route path={["/article/:id", "/"]}>
          <Home />
        </Route>
        
      </Switch>

在底部你会看到我不得不将 404 组件放在我的 index 路由上方，因为如果我使用 catch all 路由，404 永远不会被命中，它只是导航到 index 路由但维护不正确的 URL . 例如，输入 http://localhost:3000/mistake 会将我带到索引路由。我不希望这样，因为我依靠 url 来呈现模块化组件，如果路径不正确，它就不起作用。

所以我需要强制任何未声明的路径指向一个 404 页面，我可以在其中显示一条消息和一个返回主页的链接。

Answer 1

你在使用 React 路由器吗？

如果是这样，您可以在路由列表的末尾使用一个包罗万象的路由，这将呈现一个 404 页面，如下所示：https://reactrouter.com/web/example/no-match

已编辑：添加到 React 路由器文档的链接

Answer 2

以下函数使用Regular Expression

    const checkRegex = (urlString) => {
        return (
          new RegExp("/").test(urlString) && new RegExp("article").test(urlString)
        );
      };

您也可以为此使用includes 函数

    const checkRegex = (urlString) => {
        return (
          urlString.includes('article') && urlString.includes('/')
        );
      };