CODEWITHSUNDEEP
javascriptreactjsreact-router
Paulo Henrick
Paulo Henrick

Reputation: 69

I can't render components with the react router dom

I am having a problem with react-router-dom, more specifically with . It is redirecting to the correct parameter, in case the user is logged in, it will be redirected to "/ dashboard", but it does not render what is in "/ dashboard". When I browse the url, it renders all, but with the redirect it doesn't render

Below my route.js file

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,
}

Below my index.js file

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>
  );
}

Upvotes: 0

Views: 63

Answers (1)

Domino987
Domino987

Reputation: 8804

This line will make signed always to be false on render, so every time.

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

You have to save it differently, for example in local state or cookies to persist it.

Upvotes: 1

Related Questions