Reactjs 我应该如何修改受保护路由的路由？

const已验证，AuthenticatedRoute是受保护路由的示例代码

我想把它们应用到我下面的路线上。 看起来，我必须修改我的路线道具或const AuthenticatedRoute，但我陷入了困境

请帮我解决这个问题

想应用我的代码吗

 <Route path="/"  render={props => <TheLayout {...props}/>} />

-->   <AuthenticatedRoute path="/"  render={props => <TheLayout {...props}/>} />

} />
-->    } />

这是我的路线（App.tsx）

import React，{Component}来自'React'；
从“react router dom”导入{HashRouter，Route，Switch，Redirect}；
...
...
常量已验证=（）=>{
//写一些条件
返回true；
}
const AuthenticatedRoute=（{component，…rest}:isAny）=>(
(
未经验证（）
? 
: 
)} />
);
...
...
...
constthelayout:any=React.lazy（（）=>import（'./containers/TheLayout'）；
const Login:any=React.lazy（（）=>import（'./views/pages/Login/Login'）；500'));
类应用程序扩展组件{
render（）{
返回(
} />
} />
);
}
}
导出默认应用程序；

看看这个：看看这个：

import React, { Component } from 'react';
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
...
...

const isAuthenticated = () => {
  //Write some condition
  return true;
}

const AuthenticatedRoute = ({ component, ...rest } : isAny ) => (
  <Route {...rest} render={(props) => (
    isAuthenticated()
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
);

...
...
...
const TheLayout : any = React.lazy(() => import('./containers/TheLayout'));
const Login :any = React.lazy(() => import('./views/pages/login/Login'));500'));

class App extends Component  {

  render() {
    return (
        <HashRouter>
            <React.Suspense fallback={loading}>
              <Switch>
                <Route exact path="/login" render={props => <Login {...props}/>} />
                <Route path="/"  render={props => <TheLayout {...props}/>} />
              </Switch>
            </React.Suspense>
        </HashRouter>
    );
  }
}

export default App;