在网址中输入 // 不会将我发送到索引，而是发送到空白页面

Question

我的路由器设置如下：

<Route path="/" element={<PrivateRoute Route={<Welcome />} />} />
<Route path="*" element={<PageNotFound />} />

在网址中输入

//

而不是

/

时会出现问题。它把我带到一个空白页。但是，当输入超过 2 个反斜杠时，它会将我发送到我的登录页面：

<Route path="/login" element={<Login />} />

我该如何解决这个问题，以便如果用户输入超过 1 个反斜杠，将它们发送到索引页面（在我的例子中为欢迎页面），或者如果不可能将它们发送到 NotFound 页面。

Answer 1

您可以创建一个组件并检查路径是否以双斜杠开头

从'react'导入{useEffect}； 从 'react-router-dom' 导入 { useNavigate };

  const navigate = useNavigate();
  useEffect(() => {
    const url = window.location.pathname;
    if (url.startsWith('//')) {
      navigate('/'); 
    }
  }, []);
  return null; 
};
export default RedirectInvalidPath;

{/*and then setup the component in your router */}

    <RedirectInvalidPath/>