提问者:小点点

我不能用react路由器dom呈现组件


null

在我的route.js文件下面

import React from 'react';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

export default function RouteWrapper({
  component: Component,
  isPrivate,
  ...rest
}) {
  const signed = false; // Se o usuario está logado

  if (!signed && isPrivate) {
    return <Redirect to="/" />
  }

  if(signed && !isPrivate) {
    return <Redirect to="/dashboard" />
  }

  return <Route {...rest} component={Component} />;

}

RouteWrapper.propTypes = {
  isPrivate: PropTypes.bool,
  component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
    .isRequired,
};

RouteWrapper.defaultProps = {
  isPrivate: false,
}

在我的index.js文件下面

import React from 'react';
import { Switch } from 'react-router-dom';
import Route from './Route';

export default function Routes(){
  return (
    <Switch>
      <Route path="/" exact component={() => <h1>SignIn</h1>} />
      <Route path="/register" component={() => <h1>SignUp</h1>} />

      <Route path="/dashboard" component={() => <h1>dashboard</h1>} isPrivate />
      <Route path="/profile" component={() => <h1>profile</h1>} isPrivate />

      <Route path="/" component={() => <h1>404</h1>} />
    </Switch>
  );
}

共1个答案

匿名用户

这一行将使signed在渲染时总是为false,所以每次。

const signed=false; //Se o usuario Estálogado

您必须以不同的方式保存它,例如以本地状态或Cookie保存它。