Estou com uma duvida referente ao uso do React Router, eu poderia ter vários arquivos por exemplo, main.js, estoque.js e banco.js e cada arquivo ter seus Router ?
ficando algo parecido como:
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;
estoque.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;
Minha intenção é que no arquivo main.js o usuário escolha qual dos módulos ele quer acessar estoque ou banco por exemplo, se ele escolher Banco, ao ser redirecionado ele possui outras rotas Apagar,Consultar e Cadastrar, a mesma coisa com a opção estoque.
Porem não está funcionando, quando eu redireciono para Banco por exemplo, ele carrega a Navbar referente a Banco com a cor e opções que passei, porem se selecionar na Navbar qualquer opção dos cadastros, ele seta a URL corretamente ex:
http://localhost:3000/Banco/Novo
Mas me redireciona para uma pagina em branco, como se eu não tivesse declarado alguma rota para essa URL