Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

React Router Render

Boa tarde,

Preciso renderizar dois componentes em uma determinada rota, por exemplo preciso renderizar uma Sidebar.js e o conteúdo da pagina ExemploPage.js

Sidebar.js

class SideNavPage extends React.Component {
  constructor(props) {
    super(props);

    };
  }
  render() {

    return (         
        <div>
            {/*Sidebar*/}
        </div>
    );
  }
}

ExemploPage.js

class ExcemploPage extends React.Component {
  constructor(props) {
    super(props);

    };
  }
  render() {

    return (         
        <div>
            {/*Conteudo*/}
        </div>
    );
  }
}

Estou olhando na documentação do React Router https://reacttraining.com/react-router/web/api/Route/render-func

E eles utilizam algo parecido como:

const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props}/>
    </FadeIn>
  )}/>
)

Porem não estou conseguindo, implementar.

Alguém sabe como eu poderia passar dois componentes para renderizar em uma rota ?

2 respostas

Consegui renderizar dois componentes na mesma rota, porem não sei se é a maneira correta, mas funcionou:

 <Route exact path={'/front' + Versao + '/financeiroBanco'} render={Navbar} />
  <Route exact path={'/front' + Versao + '/financeiroBanco'} component={FinanceiroBanco} />

E lendo na documentação estão avisando para nao utilizar render e component na mesma rota, pois pode ocasionar a remontagem do componente, me corrija se estiver errado.

Warning: <Route component> takes precedence over <Route render> so don’t use both in the same <Route>

Seria essa a maneira correta ou teria outra forma ?

solução!

Fala Denis, tudo bom? Se voce quer renderizar dois componentes na mesma rota, acho que seria valido criar um componente que receba os dois:

<Route path='*' component={() => <div><Comp1/><Comp2/></div>} />