DNY client (2- Routing) | Chinese Rule of Eight

download dny-client-2
install react router dom package: npm i react-router-dom

In App.js, we extract BrowserRouter from react-router-dom which is the package we just installed.
BrowserRouter needs Router components to let it know where and how to route. Thus we need to implement MainRouter. MainRouter routes ‘/’ to a component called Home. We need to implement this Home component also.

src/App.js

Implement MainRouter

This is the main routing mechanism. We basically extract Route and Switch from the package we just installed. In our case, we need a simple router to route path ‘/’ to component Home

We create this pure component so that it can be used inside component BrowserRouter in App.js
It routes different paths to different components.

src/MainRouter.js

import React from 'react'

import {Route, Switch} from 'react-router-dom'

import Home from './core/Home'

const MainRouter = () => (

<div>

</Switch>

</div>

)

export default MainRouter;

Implement Home component for viewing

We created a router that routes to a Home component. Let us implement that Home component.

First, we create a core folder in src. Then we put Home component in there, which basically just displays the data. This simple display of data is fitting to use a pure component like so:

src/core/Home.js

const Home = () => (

<p className="lead">Welcome to DNY tours</p>

</div>

)

export default Home;

Hence, this core folder will contain all display of views using pure components.

Adding Sign up Page

Create another folder called user, we’ll put all user-related UI in there. Then create file Signup.js:

src/user/Signup.js

import React, { Component } from 'react';

export class Signup extends Component {

constructor() {

super()

this.state = {

name: "",

email: "",

password: "",

error: ""

}

render() {

return (

<h2 className="mt-5 mb-5">Signup</h2>

<form>

</div>

<label className="text-muted">Email</label>

</div>

<label className="text-muted">Password</label>

</div>

<button className="btn btn-raised btn-primary">submit</button>

</form>

</div>

);

}

export default Signup

update src/MainRouter.js like so:

import React from 'react'

import {Route, Switch} from 'react-router-dom'

import Home from './core/Home'

import Signup from './user/Signup'

const MainRouter = () => (

<div>

</Switch>

</div>

)

export default MainRouter;