React Router: Use more files with routes

Question

I have a question regarding the use of React Router, I could have several files for example, main.js, stock.js and bank.js and each file have its Router ?

getting something like:

main.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Estoque from './Estoque';
import Banco from './Banco';
import OpcaoNoMenu from './componentes/OpcaoMenu';


const Main = () => {
  return <main>
<OpcaoNoMenu></OpcaoNoMenu>
    <Switch>
      <Route exact path={'/Estoque} component={Estoque} />
      <Route exact path={'/Banco'} component={Banco} />
    </Switch>
  </main>
};

export default Main;

stock js.

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

import EstoqueNovo from './EstoqueNovo';
import ConsultaEstoque from './ConsultaEstoque';
import ApagarEstoque from './ApagarEstoque';
import HomeEstoque from './HomeEstoque;
import NavBarEstoque from '/componentes/Navbar';

const Estoque = () => {
  return <main>
<NavbarEstoque color="blue" opcao="suporte estoque"></NavbarEstoque
    <Switch>
      <Route exact path={'/Estoque/Home'} component={EstoqueHome} />
      <Route exact path={'/Estoque/Novo'} component={EstoqueNovo} />
      <Route exact path={'/Estoque/Consulta'} component={ConsultaEstoque} />
      <Route exact path={'/Estoque'/Apagar} component={ApagarEstoque} />
    </Switch>
  </main>
};
export default Estoque;

Banco js.

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

import BancoNovo from './BancoNovo';
import ConsultaBanco from './ConsultaBanco';
import ApagarBanco from './ApagarBanco';
import HomeBanco from './HomeBanco';
import NavBarBanco from '/componentes/Navbar';

const Banco = () => {
  return <main>
<NavbarBanco color="green" opcao="suporte banco"></NavbarBanco
    <Switch>
     <Route exact path={'/Banco/Home'} component={BancoHome} />
      <Route exact path={'/Banco/Novo'} component={BancoNovo} />
      <Route exact path={'/Banco/Consulta'} component={ConsultaBanco} />
      <Route exact path={'/Banco/Apagar} component={ApagarBanco} />
    </Switch>
  </main>
};
export default Banco;

My intention is that in the main.js file the user choose which of the modules he wants to access stock or bank for example, if he choose Bank, when being redirected he has other routes Delete,Query and Register, the same thing with the stock option.

However it is not working, when I redirect to Bank for example, it loads the Navbar for Bank with the color and options I passed, but if you select in Navbar any options of the entries, it arrow the URL correctly ex:

http://localhost:3000/Banco/Novo

But redirect me to a blank page, as if I hadn’t declared a route to that URL

Answer 1

The problem is how the nested routes are organized. You can do what you want as follows

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Estoque from './Estoque';
import Banco from './Banco';
import OpcaoNoMenu from './componentes/OpcaoMenu';


const Main = () => {
  return <main>
<OpcaoNoMenu></OpcaoNoMenu>
    <Switch>
      <Route exact path={'/Estoque'} component={Estoque}>
        { /*... add aqui suas rotas de estoque, exemplo: */ }
        <Switch>
          <Route path={'/Home'} component={EstoqueHome} />
          <Route path={'/Novo'} component={EstoqueNovo} />
        </Switch>
      </Route>
      <Route exact path={'/Banco'} component={Banco}>
        { /*... add aqui suas rotas de estoque, exemplo: */ }
        <Switch>
          <Route path={'/Home'} component={BancoHome} />
          <Route path={'/Novo'} component={BancoNovo} />
        </Switch>
      </Route>
    </Switch>
  </main>
};

export default Main;

If you want to separate into files, simply move the Switch of Estoque and Banco for their respective modules.

A hint, these routes like Home are disposable, recommend you abstract them in the root route of Estoque and Banco pq /Estoque and /Estoque/Home are synonymous.