react-router-dom:PrivateRoute路由

react-router-dom

发布日期: 2022-07-02

更新日期: 2022-07-03

文章字数: 391

阅读时长: 1 分

阅读次数:

[^注]: 文中示例只能使用在ts项目中，博客的代码tsx 好像有问题，只能使用jsx了

react-router-dom V5 配置路由守卫组件遇到的问题：

不多说什么，今天在练习typeScript 中遇到了路由守卫的问题，下面放代码。

// PrivateRoute.tsx
import { Route, Redirect, RouteProps } from 'react-router-dom';
import { hasToken } from '@/utils/storage'
export interface PrivateRouteProps extends RouteProps  {
  component: React.ComponentType<any>
}

export const PrivateRoute = (props: PrivateRouteProps) => {
  let { component: Component, ...rest } = props;
  return (
  <Route
  {...rest}
  render={props =>  hasToken() ? <Component {...props} /> : <Redirect to='/login' />}
  />)
}

// app.tsx
import PrivateRoute from '@/utils/PrivateRoute';
export default function App() {
<PrivateRoute path="/profile/edit" component={ProfileEdit} exact />
}

但是我按上面的代码 c + v 后代码报错了，在我改了半天上图后发现，就算是不报错，页面也会有问题，报告给的前辈，前辈启动了他存的老代码时，运行不仅没有问题，页面也没问题，但是他给我写demo时，一样的代码，该报错报错，改完报错页面寄了。

在老大哥找到问题前，我只能使用笨方法，目前好像没什么问题，代码如下：

// PrivateRoute.tsx
import { hasToken } from '@/utils/storage'
import { Route, Redirect, RouteProps } from 'react-router-dom'
export default function PrivateRoute(porps: RouteProps) {
  return (
    hasToken() ? <Route {...porps} /> : <Redirect to='/login' />
  )
}

// app.tsx
import PrivateRoute from '@/utils/PrivateRoute';
export default function App() {
// app.tsx
// 可以使用component
  <PrivateRoute path="/profile/edit" component={ProfileEdit} exact />

// 也可以使用children
//  <PrivateRoute path="/profile/edit">
//    <ProfileEdit></ProfileEdit>
//  </PrivateRoute>
}