Does ReactJS Component reload on History Forward?

Question

I ran into an interesting issue setting up routes in my app. I have a component that requests an html stream from the server when the component is loaded based on a props.doctype variable:

import {ajaxCall} from '../global';
import React,{Component} from "react";
import Panel from '../comp/panel/panel';

import "./login.css";

    class Legal extends Component{
      constructor(props,context){
        super(props,context);
        this.state = {data: ""}
      };
      componentDidMount(){
        let opts = {"type":this.props.doctype};
        ajaxCall("http://localhost:5000/legal",opts,this.handleResponse.bind(this))
      };
      handleResponse(resp){
        console.log(this.state)
        let data = resp.data;
        this.setState({data:data});
      };
      render(){
        return(
          <div className="legal" dangerouslySetInnerHTML={{__html: this.state.data}}></div>
      )};
    }
    export default Legal

The Route to this component looks like this:

<Route path="/Login/Terms" render={(props)=><Legal doctype="terms"/>} />

and the Link:

<NavLink to={pathname:"/Login/Terms",doctype:"terms"}}>Terms</NavLink>

The problem I am running into is when the Legal component loads, it correctly loads the associated html from the server; however, if I hit the back button on the browser and then the forward button, I get a blank page with no errors. Is there an issue with the way I am routing?

*Edit * Login Component:

import React from "react";
import {BrowserRouter as Router, Route} from "react-router-dom"
import LoginForm from "./loginform";
import Legal from "./legal";

const Login = (props) =>{
  return(
    <Router>
        <div className="content">
          <Route exact path="/Login" component={LoginForm} />
          <Route path="/Login/Terms" render={(props)=><Legal doctype="terms"/>} />
          <Route path="/Login/Privacy" component={Legal} />
          <Route path="/Login/Recoverpw" component={Recover} />
        </div>
    </Router>
  );
};
export default Login;

Answer 1

I think the problem is here:

<NavLink to={pathname:"/Login/Terms",doctype:"terms"}}>Terms</NavLink>

When you are routing like this you have doctype props in the Legal component but when you direclty load the component from url like http://localhost:3000/Login/Terms , the component no longer has the doctype prop, so it can't fetch the HTML content appropriately and renders a white screen.