React Router: Use more files with routes

Question

React Router: Use more files with routes

Navigation

#1 by (0 votes)

2

I have a question regarding the use of React Router, I could have several files eg main.js, stock.js and bank.js and each file have their 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 file main.js the user choose which of the modules he wants to access stock or bank for example, if he chooses Bank, when he is redirected he has other Delete, Query and Register routes, the same thing with the stock option.

But it is not working, when I redirect to Bank for example, it loads the Navbar referring to Bank with the color and options that I passed, but if you select Navbar any option of the registers, it directs the URL correctly ex: p>

http://localhost:3000/Banco/Novo

But it redirects me to a blank page, as if I had not declared any route to this URL

react react-router

asked by anonymous 12.06.2018 / 16:21

1 answer

I need to create a Compound dataset using HDF in C # Sql Procedure [closed]

score 0 · Answer 1

The problem is how 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 Switch from Estoque to Banco to their respective modules.

A tip, these routes of type Home are disposable, I recommend you abstract them in the root path of Estoque and Banco pq /Estoque and /Estoque/Home are synonymous.