2

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

1 Resposta 1

1

O problema é como as rotas aninhadas estão organizadas. Você pode fazer o que vc quer da seguinte forma

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;

Se você deseja separar em arquivos, simplesmente mova o Switch de Estoque e Banco para seus respectivos módulos.

Uma dica, essas rotas do tipo Home são descartáveis, recomendo vc abstrair elas na rota raíz de Estoque e Banco pq /Estoque e /Estoque/Home são sinonimos.

1
  • Acredito que nao consegui me explicar direito, como pode ver no exemplo que passei acima, cada modulo tem uma Navbar que fica fixa na tela, renderizando apenas os outros componentes dependendo da rota selecionada. Mesma coisa com o modulo Banco ele também possui uma Navbar que fica fixa e renderiza apenas os componentes das rotas do banco. Commented 19/06/2018 às 11:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .