react-router 一些路由不匹配答案

【问题标题】：react-router some routes not matchingreact-router 一些路由不匹配
【发布时间】：2022-01-05 00:58:20
【问题描述】：

我有私人路线

app-routes.js 文件

const routes = [
{ path: '/', component: HomePage },
{ path: '/articles/:id', component: Article },
{ path: '/expert', component: Experts },
...
{ path: '/requests', component: ComRequest },
{ path: '/admin', component: AdminHomePage },]

export default routes.map(route => {
 return {
  ...route,
  component: route.component
 }
})

content.js 文件将 app-routes 迭代为数组如果不匹配任何路由重定向到 /

import routes from 'app-routes'

return(
 <Switch>
  {routes.map(({ path, component }) => (
    <PrivateRoute
     exact
     key={path}
     path={path}
     component={component}
    />
   ))}
  <Redirect to={'/'} />
 </Switch>)

PrivateRoute.js 组件文件检查用户是否重定向到 /login

function PrivateRoute({ component, ...rest }) {
 return (
  <Switch>
   <Route
    {...rest}
    render={(matchProps) => getUser()
     ?
      <WithLayout
       {...matchProps}
       component={component}
       layout={MainLayout}
      />
      :
      <Redirect to={{ pathname: '/login', state: { from: matchProps.location } }} />}
   />
  </Switch>
 )
}

export default PrivateRoute

getUser() 函数返回对象字符串 {userdata}

getUser.js

export function getUser() {
 return localStorage.getItem('user')
}

在浏览器中，一些 /articles、/expert 路由呈现视图，但随机或逻辑无法弄清楚其他一些 /requests 的路由如何, /admin 路由不匹配并重定向到 /

有时每条路线都会重定向到 /

如果我评论 <Redirect to={'/'}/> 某些路由会呈现白屏

还有一件更烦人的事情是 刷新时总是重定向作品转到 / 网址不停留在匹配的路线上

在app.js 中检查用户，如果找到则返回Content，如果没有，则用户返回NotAuthenticatedContent 路由

const { user } = useAuth()
if (user && user.id) {
  return <Content />
 } else
  return <NotAuthenticatedContent />
};

user 从 AuthContext 导入

function AuthProvider(props) {
 const [user, setUser] = useState()
 const { user: currentUser } = useSelector((state) => state.account)
 useEffect(() => {
  (async function () {
   if (currentUser && currentUser.jwt)
     setUser(currentUser.user)
   })();
 }, []);
 return (<AuthContext.Provider value={{user}} {...props}/>)
}
const AuthContext = createContext({})
const useAuth = () => useContext(AuthContext)
export {AuthProvider,useAuth}

我注意到history.push('/requests') 可以转到 /requests 页面但是当我输入 url 部分时重定向到 /

【问题讨论】：

什么是“顶级路线”和“底部路线”？您能否澄清并提供示例说明哪些有效，哪些无效？ getUser 是什么？请包含所有相关代码。
似乎我们仍然需要很多上下文，或者一个可重现的例子。我将您的代码复制/粘贴到codesandbox 中，但我无法重现您描述的问题。另外，当没有任何过时的答案或根本没有任何答案时，您为什么将此赏金标记为想要一个最新的答案？您能否更新您的问题以包含更完整和全面的代码示例？您能否尝试创建一个 running 代码框来重现我们可以实时检查和调试的问题？
您对key= 的使用很奇怪。首先只导出没有映射的路由数组export default routes，然后告诉我们结果。
你使用的是什么版本的 React？最新的 v6 有一些向后不兼容的变化。
确保您使用 BrowserRouter 作为 switch 的父级并且仅在一个位置。以及在switch中使用switch的原因是什么，请将Switch从PrivateRoute中删除，然后重试。附言问题的另一个原因可能是 react-router-dom 的版本，因为更高版本的包的使用已经改变。

标签： reactjs react-router react-router-dom

【解决方案1】：

使用基于网络的技术，您需要习惯使用浏览器开发工具。在那里你会看到很多关于你的空白页面的错误。

这些错误主要是由于 react、react-router、react-router-dom 的主要版本更改，以及您尝试使用 npm 安装它们的方式。

要解决您的问题，首先，请确保您拥有这些工具的第 5 个版本。尝试在没有版本的情况下安装将导致安装最新版本。当您对应用的功能有信心但准备好进行大量更改时，请切换到 v6。

npx create-react-app@5 appName
npm install react-router@5
npm install react-router-dom@5

如果版本不匹配，您会在控制台上收到不兼容导入的错误，但许多错误仅在浏览器上运行时出现，因此请打开开发人员工具看看还有什么问题。

我已经尝试过您的代码片段。除了这些版本不兼容和一些逻辑错误之外，它们没有问题。

除非你真的改变了结构，否则你不需要从你的路由映射中导出一个新对象，所以export default routes 就足够了。
您没有登录页面的直接路径。在content.js的switch组件中和你的私有路由映射之外，添加<Route exact key="/login" path="/login" render={Login}/>
除此之外，请确保您的路线不会影响某些部分匹配

我已经在 github 上上传了我的示例应用程序：react-v5-simple-login-route-layout。为此，我使用了上述命令，删除了源文件夹中除index.* 和App.js 之外的所有内容，按原样复制了OP 的代码片段，仅编辑了我上面提到的部分，添加了缺少的页面组件和登录/注销页面以清除本地存储，和即兴的布局。

【讨论】：

使用Switch 和Route 与component 和render 一起使用不是很明显吗？ OP 使用的是RRDv5？如果他们不小心安装了 v6，那么就会出现更多错误，并且所有路由都不起作用。我怀疑 OP 的问题更多地与身份验证的一些异步性质有关，所描述的有时可以工作，有时不能进行身份验证重定向。
@DrewReese，感谢您的注释。 OP 没有说明他们是如何设置项目的。仅使用 create-react-app 不会为您提供其他软件包的正确版本。这样，会出现很多错误，但只有浏览器内的开发工具显示，我强烈怀疑 OP 被忽略了。我执行了上述步骤，并且在我点击正确的设置之前看到了一些可能的结果，然后在链接中制作了工作应用程序。由于错误和/ 问题，逻辑部分进入空白页。
我只能用 OP 提供的信息复制“有时有效”的声明，它很可能只是为了遮蔽路线，因此我的警告。
我完全无法重现 OP 描述的任何问题。看看我的 cmets 和 codesandbox 可以追溯到一周左右。你的答案基本上是一样的。 Op 也没有回应也没有更新他们的问题。不幸的是，他们增加了一个赏金，所以无法投出非常接近的选票，所以我一直在等待这个。
@DrewReese，我明白你的担忧和你面临的问题。您没有给出完整的答案，因为您无法复制该问题。我看到的问题是您使用了似乎带有正确版本的代码和框的模板，而且您可能将您的模板写得完美，但您错过了我可能发现的问题。我只在看到错误时才添加所需的包来使用 nodejs。

【解决方案2】：

我把 console.log() 放在每一个地方并弄清楚了是app.js

const { user } = useAuth()
if (user && user.id) {
 console.log('user logged in')
 return <Content />
} else
 console.log('user not logged in')
 return <NotAuthenticatedContent/>
}

在浏览器中 user 的第一个值或初始值为 null，并且在控制台中 用户未登录 打印，后来 用户登录 也被打印了，所以user 检查是错误的，然后<NotAuthenticatedContent/> 被返回，它有一些相同的路线，例如/articles/:id,/expert

【讨论】：