ReactJS and nested routes with react-router v4

Here is my solution. This might not so effective but this is working on me.

So my strategy is get the window url and check the step.

In here I create 8 files.

• Header
• Footer
• Home.js
• NewRecord.js
• Steps.js
• StepOne.js
• StepTwo.js
• StepThree.js

I will describe only the App.js and the Steps.js. Others is up to you.

App.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Home from './Home'
import NewRecord from './NewRecord'
import Steps from './Steps'

const App = () => {

return (
    <Router>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/new_record" component={NewRecord}/>
            <Route path="/new_record/step_1" component={Steps}/>
            <Route path="/new_record/step_2" component={Steps}/>
            <Route path="/new_record/step_3" component={Steps}/> 
        </Switch>
    </Router>
    )

}

export default App

Steps.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Header from './Header';
import Footer from './Footer';

import StepOne from './StepOne';
import StepTwo from './StepTwo';
import StepThree from './StepThree';

export default class Steps extends Component {
    constructor (props) {
        super(props)
        this.state = {
            url : window.location.href, 
            currentStep: 0 
        }
    }

    checkCurrentStep = () => {
        // check the url using javascript search() method
        if (this.state.url.search('step_1') != -1) {
            this.state.currentStep = 1;
        } else if (this.state.url.search('step_2') != -1) {
            this.state.currentStep = 2;
        } else {
            this.state.currentStep = 3;
        }
    }

    componentWillMount () {
        this.checkCurrentStep()
    }

    render() {
        return (
            <div>
                <Header />
                { (this.state.currentStep == 1) ? <StepOne /> : 
                  (this.state.currentStep == 2) ? <StepTwo /> :
                  <StepThree />
                }
                <Footer />
            </div>
        );
    }
}