Javascript 使用KeyClope和React路由器在单个web应用程序上同时拥有公共和私人路由的最佳方式？

我有一个web应用程序，你必须经过身份验证才能看到内容。进入网站时，您首先看到的是在login.js中呈现的KeyClope登录页面，一旦登录，您就可以访问Routes.js。现在我必须将公共路线添加到同一个应用程序中，我不知道如何继续。这是我到目前为止所拥有的

Index.js

  <Suspense fallback='loading'>
    <BrowserRouter>
      <PublicRoutes/>
    </BrowserRouter>
  </Suspense>

    return ( 
        <Switch>
            <Route exact path="/" render={() => <Redirect to="/signup"/>}
            />
            <Route exact path="/signup" render={() => <SignupPage header={HeaderNav}/>}
            />
            <Route exact path="/login" render={() => <Login/>}
            />
        </Switch>
    );

if(this.state.keycloak) {
  if(this.state.authenticated) return (
    <Routes keycloak={this.state.keycloak}/>
  ); else return (<div>Unable to authenticate!</div>)
}
return (
  <div>Loading, please wait...</div>
);

        <Switch>
            <Route exact path="/" render={() => <Redirect to="/home"/>}
            />
            <Route exact path="/home" render={() => <HomePage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/catalog" render={() => <CatalogPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/query" render={() => <QueryPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/workshop" render={() => <WorkshopPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/dashboard/stats" render={() => <StatsPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/keys" render={() => <KeysPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/consumption" render={() => <ConsumptionPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/faq" render={() => <HelpPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/contact_us" render={() => <ContactPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Redirect from="/login" to="/home"/>
        </Switch>

PublicRoutes.js

  <Suspense fallback='loading'>
    <BrowserRouter>
      <PublicRoutes/>
    </BrowserRouter>
  </Suspense>

    return ( 
        <Switch>
            <Route exact path="/" render={() => <Redirect to="/signup"/>}
            />
            <Route exact path="/signup" render={() => <SignupPage header={HeaderNav}/>}
            />
            <Route exact path="/login" render={() => <Login/>}
            />
        </Switch>
    );

if(this.state.keycloak) {
  if(this.state.authenticated) return (
    <Routes keycloak={this.state.keycloak}/>
  ); else return (<div>Unable to authenticate!</div>)
}
return (
  <div>Loading, please wait...</div>
);

        <Switch>
            <Route exact path="/" render={() => <Redirect to="/home"/>}
            />
            <Route exact path="/home" render={() => <HomePage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/catalog" render={() => <CatalogPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/query" render={() => <QueryPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/workshop" render={() => <WorkshopPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/dashboard/stats" render={() => <StatsPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/keys" render={() => <KeysPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/consumption" render={() => <ConsumptionPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/faq" render={() => <HelpPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/contact_us" render={() => <ContactPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Redirect from="/login" to="/home"/>
        </Switch>

返回（
}
/>
}
/>
}
/>
);

Login.js

  <Suspense fallback='loading'>
    <BrowserRouter>
      <PublicRoutes/>
    </BrowserRouter>
  </Suspense>

    return ( 
        <Switch>
            <Route exact path="/" render={() => <Redirect to="/signup"/>}
            />
            <Route exact path="/signup" render={() => <SignupPage header={HeaderNav}/>}
            />
            <Route exact path="/login" render={() => <Login/>}
            />
        </Switch>
    );

if(this.state.keycloak) {
  if(this.state.authenticated) return (
    <Routes keycloak={this.state.keycloak}/>
  ); else return (<div>Unable to authenticate!</div>)
}
return (
  <div>Loading, please wait...</div>
);

        <Switch>
            <Route exact path="/" render={() => <Redirect to="/home"/>}
            />
            <Route exact path="/home" render={() => <HomePage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/catalog" render={() => <CatalogPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/query" render={() => <QueryPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/workshop" render={() => <WorkshopPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/dashboard/stats" render={() => <StatsPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/keys" render={() => <KeysPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/consumption" render={() => <ConsumptionPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/faq" render={() => <HelpPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/contact_us" render={() => <ContactPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Redirect from="/login" to="/home"/>
        </Switch>

if（this.state.keydepose）{
如果（this.state.authenticated）返回(
)；否则返回（无法验证！）
}
返回(
正在加载，请稍候。。。
);

Routes.js

  <Suspense fallback='loading'>
    <BrowserRouter>
      <PublicRoutes/>
    </BrowserRouter>
  </Suspense>

    return ( 
        <Switch>
            <Route exact path="/" render={() => <Redirect to="/signup"/>}
            />
            <Route exact path="/signup" render={() => <SignupPage header={HeaderNav}/>}
            />
            <Route exact path="/login" render={() => <Login/>}
            />
        </Switch>
    );

if(this.state.keycloak) {
  if(this.state.authenticated) return (
    <Routes keycloak={this.state.keycloak}/>
  ); else return (<div>Unable to authenticate!</div>)
}
return (
  <div>Loading, please wait...</div>
);

        <Switch>
            <Route exact path="/" render={() => <Redirect to="/home"/>}
            />
            <Route exact path="/home" render={() => <HomePage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/catalog" render={() => <CatalogPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/query" render={() => <QueryPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/workshop" render={() => <WorkshopPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/dashboard/stats" render={() => <StatsPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/keys" render={() => <KeysPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/consumption" render={() => <ConsumptionPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/faq" render={() => <HelpPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/contact_us" render={() => <ContactPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Redirect from="/login" to="/home"/>
        </Switch>

}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>

---

我想要的是，当用户经过身份验证时，Routes.js文件将接管PublicRoutes.js文件。现在，当用户登录时，他仍然只能看到公共路由内容。

尝试提升状态。也许

Index.js

可以在两套路由器之间切换

如果需要，可以为Login.js传递状态（keydape对象）或回调（handleLogin）

例如：

render() {
   const { keycloak, authenticated } = this.state;
   return 

   <div>
     {authenticated ? (
       <Secured keycloak={keycloak} />
      ) : (
       <Public handleLogin={this.handleLogin} />
     )}
   </div>
}

render（）{
const{keydape，authenticated}=this.state；
返回
{认证(
) : (
)}
}

非常感谢您，我已使用您的解决方案使其正常工作。使用您的解决方案，如何防止在浏览器刷新时将索引状态恢复为默认状态？您可以使用浏览器localStorage API在localStorage中保留应用程序的状态。或者使用npm上的多种可用包装之一，如

本地存储