0

A situação é a seguinte, ao criar um app com o react + webpack eu tenho um arquivo html, sendo ele um index.html que carrega um bundle.js (padrão webpack) para ser exibido no browser, mas minha app precisa ter a seguinte estrutura, ela tem uma tela que contem um formulário que pode ser preenchido, em uma rota /form e uma tela de login para gerenciar o conteúdo inserido pelos usuários em /login sendo que em nem um momento o login vai ter algum componente para ir para o form e vice versa, sendo que ja tentei utilizar o react-router-dom para fazer isso, mas parece não funcionar neste quesito

2
  • Podes dar exemplos de como esses dois componentes/páginas são?
    – Sergio
    Commented 5/07/2017 às 9:36
  • Independente da forma que eles são, é dúvida é como essa app irá fazer essas duas rotas, como eu posso ir na barra superior digitar /form ele ir para o formulário ou eu digitar /login ele ir para uma página totalmente distintas, sendo que isso é só um exemplo já que isso pode ser para outra app totalmente diferente, você pode se basear no WordPress que você tem uma rota para a administração e outra para a página do site sendo que no site não há nem um botão para ir para a página de administração (na maioria das vezes) Commented 5/07/2017 às 11:24

1 Resposta 1

1

Se eu entendi corretamente, seu problema é só na configuração do react-router-dom.

index.jsx

import { render } from 'react-dom';
import Route from './route';

const rootEl = document.getElementById('app');

render(
    <div>
        <Route />
    </div>,
rootEl);

Aqui você pode importar sua configuração de rota.

route.jsx

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import App from './components/App';
import Login from './components/login/Login';
import Signup from './components/signup/Signup';

export default () => (
  <Switch>
    <Route path="/signup" render={props => <Signup {...props} />} />
    <Route path="/" render={props => <App {...props} />} />
    <Route path="/login" render={props => <Login {...props} />} />
  </Switch>
);

Nesse componente eu seleciono a rota para o meu component App, Login ou Signup.

Dentro do meu App (ou Signup,Login e qualquer outro componente que você adicionar nessa rota) eu posso ter mais rotas, sendo uma que aponte para o /form:

App.jsx

const App = () => (
  <div>
    <Switch>
      <Route exact path="/" component={Dashboard} />
      <Route path="/form" component={ComponentForm} />
    </Switch>
  </div>

E assim você chega no component Form pelo seu componente App.

Esse link tem um bom tutorial sobre isso.

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 .