Static routes in React for two separate pages

Asked

Viewed 1,022 times

0

The situation is this, when creating an app with React + webpack I have an html file, being it an index.html that loads a Bundle.js (default webpack) to be displayed in the browser, but my app needs to have the following structure, it has a screen that contains a form that can be filled in, on a route /form and a login screen to manage the content entered by users in /login and in no time the login will have some component to go to the form and vice versa, and I tried to use the React-router-dom to do this, but it does not seem to work in this regard

javascript front-end react react-router

  • You can give examples of how these two components/pages are?

  • Regardless of how they are, it’s doubt how this app will do these two routes, how I can go in the top bar to type in /form it go to the form or I type in /login it go to a totally separate page, where this is just an example since this can be for another totally different app, you can base on Wordpress that you have a route to the administration and another to the site page being that on the site there is not even a button to go to the admin page (most of the time)

1 answer

1

If I understand correctly, your problem is only in setting the React-router-dom.

index.jsx

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

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

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

Here you can import your route configuration.

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>
);

In this component I select the route to my App, Login or Signup.

Inside my App (or Signup,Login and any other component you add on this route) I can have more routes, one that points to the /form:

App.jsx

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

And so you arrive at the Component Form through its App component.

That one link have a good tutorial on this.

Browser other questions tagged javascript front-end react react-router

You are not signed in. Login or sign up in order to post.