Question

因此，我刚刚修复了我的应用程序，以便成功登录后，应显示主页。但是，此后，我的其余路由似乎已经神奇地消失了。以下是相关代码：

DefaultLayout.js

class DefaultLayout extends Component {
  constructor(props){
    super(props);
    this.state = {
       name:'',
       redirect: false,
   };
}

componentDidMount() {
     let data = JSON.parse(sessionStorage.getItem('userData'));
     console.log(data);
}

  render() {
    if(!sessionStorage.getItem('userData') || this.state.redirect){
    return (<Redirect to={'/404'}/>)
}

    return (
      <div className="app">
        <AppHeader fixed>
          <DefaultHeader />
        </AppHeader>
        <div className="app-body">
          <AppSidebar fixed display="lg">
            <AppSidebarHeader />
            <AppSidebarForm />
            <AppSidebarNav navConfig={navigation} {...this.props} />
            <AppSidebarFooter />
            <AppSidebarMinimizer />
          </AppSidebar>
          <main className="main">
            <AppBreadcrumb appRoutes={routes}/>
            <Container fluid>
              <Switch>
                {routes.map((route, idx) => {
                    return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
                        <route.component {...props} />
                      )} />)
                      : (null);
                  },
                )}
                <Redirect from="/home" to="/dashboard" />
              </Switch>
            </Container>
          </main>

Login.js

class Login extends Component {
  constructor(props) {
    super(props);
       this.state = {
       loginError: false,
       redirect: false
};
this.signup = this.signup.bind(this);
}
signup(res, type) {
  let postData;
  if (type === 'google' && res.w3.U3) {
  postData = {
    email: res.profileObj.email,
    name: res.profileObj.name,
    googleId: res.profileObj.googleId,
    googleAccessToken: res.Zi.access_token,
    googleImageURL: res.profileObj.imageURL
  };
 }


if (postData) {
  PostData('v1/zuulusers', postData).then((result) => {
     let responseJson = result;
     sessionStorage.setItem("userData", JSON.stringify(responseJson));
     this.setState({redirect: true});
  });
  } else {}
}
render() {

  if (this.state.redirect || sessionStorage.getItem('userData')) {
    return (<Redirect to={'/home'}/>)
}
const responseGoogle = (response) => {
  console.log("google console");
  console.log(response);
  this.signup(response, 'google');
}

    return (


      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="5">
              <CardGroup>
                <Card className="text-white py-5 d-md-down-none" style={{ width: '44%' }}>
                  <CardBody className="text-center">
                    <div>
                      <h2>Login if you dare</h2>
                      <img src="https://s3.amazonaws.com/whatif-assets-cdn/images/asset_1+copy2.png" alt="zuul logo" id="zuul_logo" className="mx-auto d-block rounded img-avatar"/>
                          <GoogleLogin
                            clientId="24656564867-3issjp4bq0gsr05banuomnniilngiicc.apps.googleusercontent.com"
                            buttonText="Login with Google"
                            onSuccess={responseGoogle}
                            onFailure={responseGoogle}
                          />
                    </div>

App.js

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route  path="/home" name="Home Page" component={DefaultLayout} />
          <Route exact path="/register" name="Register Page" component={Register} />
          <Route exact path="/404" name="Page 404" component={Page404} />
          <Route exact path="/500" name="Page 500" component={Page500} />
          <Route exact path="/" name="login" component={Login} />
        </Switch>
      </BrowserRouter>
    );
  }
}

然后这是一小段代码，展示了如何在CoreUI中设置路由：

routes.js

const LoadingButtons = Loadable({
  loader: () => import('./views/Buttons/LoadingButtons'),
  loading: Loading,
});

const Charts = Loadable({
  loader: () => import('./views/Charts'),
  loading: Loading,
});

const Dashboard = Loadable({
  loader: () => import('./views/Dashboard'),
  loading: Loading,
});
const routes = [
  { path: '/', name: 'Login', component: Login, exact: true },
  { path: '/home', name: 'Home', component: DefaultLayout, exact: true},
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },

由于某种原因，首页加载后，不会再加载其他任何页面。它们只是空白，但路径是在URL中定义的。不确定我在路由中做错了什么。

Answer 1

可以创建沙箱版本吗？另外，从快速观察来看，我认为这是错误的，您已经做了类似的事情

 <GoogleLogin
     clientId="24656564867-3issjp4bq0gsr05banuomnniilngiicc.apps.googleusercontent.com"
      buttonText="Login with Google"
      onSuccess={responseGoogle}
       onFailure={responseGoogle}
   />

您的 responseGoogle 恰好位于render()中，这又是错误的，因为您不希望每次状态更改时都呈现它，而是希望有人单击GoogleLogin时显示它按钮

第二，当你做这样的事情

onSuccess={responseGoogle}
onFailure={responseGoogle}

您正在引用变量而不是调用它。

如果您问我，我建议您声明

const responseGoogle = (response) => {
  console.log("google console");
  console.log(response);
  this.signup(response, 'google');
}

渲染外部，然后通过更改您的

进行调用

 <GoogleLogin
      clientId="24656564867-3issjp4bq0gsr05banuomnniilngiicc.apps.googleusercontent.com"
      buttonText="Login with Google"
       onSuccess={this.responseGoogle}
       onFailure={this.responseGoogle}
 />

Ps：请注意，我已将responseGoogle更改为this.responseGoogle 另外，我希望您已在Google Oauth中配置/添加了主机地址和重定向URL？

Ps：有太多代码需要理解，您需要考虑发布与之相关的代码

实施Google OAuth后，CoreUI React仪表板路由无法正常工作

1 个答案: