Internal Errigal Collaboration Wiki

User Tools

Site Tools

Trace:
Writing /app/www/public/data/meta/development/applications/reactjsrouting.meta failed
development:applications:reactjsrouting

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
development:applications:reactjsrouting [2017/08/14 09:07] – [routes.js] 1carew1development:applications:reactjsrouting [2021/06/25 10:09] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +====== React Routing - React Router ======
 + --- //[[colm.carew@errigal.com|Colm Carew]] 2017/08/14 00:54//
 +
 +===== Introduction =====
 +
 +Note this covers the Frontend Routing in React and not the backend routing with react when doing something like server side rendering.
 +
 +A very simple explanation of Routing is that it determines what components to render when the user goes to a certain route (path or url).
 +
 +The react front end router is called 'react-router-dom' so if you want to install it in your project run : <code>npm install --save react-router-dom</code>
 +
 +
 +===== Setup =====
 +Once react router is installed you will need to setup which component actually renders the 'BrowserRouter' component which is used for handling the routes.
 +
 +It depends how you laid out your project. I like to have index.js (the entry point) render the App.js component and then the App.js component bring the whole Application together. Thus I use the App.js to render the BrowserRouter.
 +
 +Say you have an application where you always want a Navbar on top regardless of what route you are in and then depending on what page you are on you render the appropriate components but keep the Navbar the same. Your code would look something like :
 +
 +==== routes.js ====
 +<code javascript>
 +import React from 'react';
 +import {Route} from 'react-router-dom';
 +import Dashboard from '../dashboard/Dashboard';
 +import DummySchedules from '../schedules/DummySchedule';
 +import DummyCompanyView from '../companies/DummyCompanyView';
 +
 +const routes = (
 +    <div>
 +        <Route path={"/dashboard"} component={Dashboard}/>
 +        <Route path={"/schedules"} component={DummySchedules}/>
 +        <Route path={"/companies"} component={DummyCompanyView}/>
 +    </div>
 +);
 +
 +export default routes;
 +</code>
 +
 +routes.js is where I would define the routing for my entire application so going to this path should render this component etc. you may want to setup some default rules so if an non existent path is arrived at then you can render your own custom 404 page.
 +
 +==== App.js ====
 +<code javascript>
 +import React, {Component} from 'react';
 +import Navbar from './navigation/Navbar';
 +import {BrowserRouter} from 'react-router-dom';
 +import routes from './routes/routes';
 +
 +class App extends Component {
 +    render() {
 +        return (
 +            <BrowserRouter>
 +                    <div style={{margin: '5vh'}}>
 +                        <Navbar />
 +                        { routes }
 +                    </div>
 +            </BrowserRouter>
 +        );
 +    }
 +}
 +
 +export default App;
 +</code>
 +
 +
 +You need to put Route components into your BrowserRouter component for routes to actually work. We are using the import of 'routes.js' to accomplish this as the routes.js file returns a div containing all the routes we want in our application.
 +
 +
 +This is basically everything you need to do in order to get react routing working if you are using react by itself. If you are using react on top of a framework then there is one more step you need to follow.
 +
 +===== React Routing with a Framework =====
 +So if you have built your project with React running in the same project in your backend such as set out by : [[toolsandtechnologies:reactWithGradle| How to Add React to a Gradle Project (Grails, Sprint Boot, etc.)]] then you need to forward the Routes you want react to handle from the Framework to the React side of things.
 +
 +The reason we need to do this is that usually the Framework handles every HTTP request so if we try routing in React and we do not have corresponding rules in the Framework we are using then we will get 404 errors from the framework and wonder why the React side of things has not kicked in.
 +
 +Assuming you are using the index.html file of your framework (or index.gsp or whatever the default entry point of your app is - basically the file that is utilising the bundle.js), you need to forward all the paths to that file. To do something like that in Spring Boot it would look like :
 +
 +==== Spring Boot - Forwarding Routes ====
 +<code groovy>
 +package com.errigal.content.distributor.controller
 +
 +import org.springframework.stereotype.Controller
 +import org.springframework.web.bind.annotation.RequestMapping
 +import org.springframework.web.bind.annotation.RequestMethod
 +import org.springframework.web.servlet.ModelAndView
 +
 +@Controller
 +public class HomeController {
 +
 +  // For some reason, wouldn't compile when value was an arry of String so method for each
 +
 +  @RequestMapping(value = "/", method=RequestMethod.GET)
 +  public ModelAndView index() {
 +    return new ModelAndView("redirect:" + "/dashboard");
 +  }
 +
 +  @RequestMapping(value = "", method=RequestMethod.GET)
 +  public String slash() {
 +    return new ModelAndView("redirect:" + "/dashboard");
 +  }
 +
 +  @RequestMapping(value = "/dashboard", method=RequestMethod.GET)
 +  public String dashboard() {
 +    return "index.html";
 +  }
 +
 +  @RequestMapping(value = "/schedules", method=RequestMethod.GET)
 +  public String schedules() {
 +    return "index.html";
 +  }
 +
 +  @RequestMapping(value = "/companies", method=RequestMethod.GET)
 +  public String companies() {
 +    return "index.html";
 +  }
 +}
 +</code>
 +
 +As can be seen in the case we have above here if the user tried to do a GET on the base URL of the application or to / then they are redirected to dashboard. This isn't the important part.
 +The important part here is that if the user goes to '/dashboard', '/schedules' or '/companies' then the framework renders the index.html file which in turn runs the react app and can now route via the URL.
 +
 +If you want to do this in Grails then you should use URL Mappings.
 +
 +===== Solution =====
 +For a sample solution please go to : Dropbox/Errigal Shared Documents/Training/react-routing-starter.zip
 +
  

Page Tools

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki