CODEWITHSUNDEEP
reactjsreact-router-dom
chichi
chichi

Reputation: 3292

Separating Route into two different files in react-router-dom

I have separated route files into two because both have different layouts.

Here is my Index.js file

import React, { useEffect } from 'react';
import { Switch, Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import { userRememberMe } from '../../store/actions/actionCreators';

//components
import AuthForms from './AuthForms';
import AAA from '../display/AAA';

import history from '../../history';

const EntryPage = ({ auth, rememberMe, rememberMeR }) => {
  useEffect(() => {
    rememberMe();
  }, []);

  if (!rememberMeR) {
    return <div>hello</div>;
  } else {
    return (
      <Router history={history}>
        <Switch>
          <Route path='/' exact component={AAA} />
          <Route path='/login' component={AuthForms} />
        </Switch>
      </Router>
    );
  }
};

const mapStateToProps = (state) => ({
  auth: state.userAuth.auth,
  rememberMeR: state.userAuth.rememberMe
});

const mapDispatchToProps = (dispatch) => ({
  rememberMe: () => dispatch(userRememberMe()),
});

export default connect(mapStateToProps, mapDispatchToProps)(EntryPage);

And, this is my AAA.js file

import React, { useEffect, useState } from 'react';
import { Switch, Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import { userRememberMe } from '../../store/actions/actionCreators';

//components
import Dashboard from './Dashboard';
import UserProfile from './UserProfile';
import Test from './Test';
import Hello from './Hello';

import history from '../../history';

//MUI + Appbar
import Layout from './Layout/Layout';
import { makeStyles } from '@material-ui/core/styles';

const drawerWidth = 240;

// MUI Setting
const useStyles = makeStyles((theme) => ({
  displayPage: {
    [theme.breakpoints.up('xs')]: {
      height: `calc(100% - 56px)`,
    },
    [theme.breakpoints.between('sm', 'xl')]: {
      marginLeft: drawerWidth,
      width: `calc(100% - ${drawerWidth}px)`,
      height: `calc(100% - 64px)`,
    },
  },
}));

const AAA = ({ auth, rememberMe }) => {
  const classes = useStyles();

  return (
    <div style={{ height: '100vh' }}>
      <div>
        <Layout />
      </div>
      <div className={classes.displayPage}>
        <Router history={history}>
          <Switch>
            <Route exact path='/' component={Dashboard} />
            <Route exact path='/hello' component={Hello} />
            <Route exact path='/test' component={Test} />
          </Switch>
        </Router>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  auth: state.userAuth.auth,
});

const mapDispatchToProps = (dispatch) => ({});

export default connect(mapStateToProps, mapDispatchToProps)(AAA);

My Dashboard is shown correctly at '124.124.432:3000' and my signup page works fine. As long as, I have my routes in Index.js, it works. But, I wanted to separate into two files because they have two different layouts.

Confusing thing is that when I used PrivateRoute style, this worked fine. But, I modified the code like above. Stopped working. It doesn't show anything except just the blank page.

How can I make this work again?

Upvotes: 0

Views: 273

Answers (1)

Luis Paulo Pinto
Luis Paulo Pinto

Reputation: 6036

The issue is because you are declaring path='/' with exact for component AAA.

<Switch>
   <Route path='/' exact component={AAA} />
   <Route path='/login' component={AuthForms} />
</Switch>

The logic above is that it will only render AAA component if the path === '/', so if you go to url /hello, the router will not understand that should render AAA component.

To fix this issue you need to invert Login and AAA Routes and remove exact from '/' Route.

<Switch>
   // You can let exact to login if you want
   <Route exact path='/login' component={AuthForms} />
   <Route path='/' component={AAA} />
</Switch>

Upvotes: 1

Related Questions