Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

React Router 4

Bom dia,

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

1 resposta
solução!

Fala Denis, acho que sua dúvida é bem este exemplo da documentação: https://reacttraining.com/react-router/web/example/route-config