ReactJS组件会在历史记录转发时重新加载吗？

Question

我在应用程序中设置路由时遇到了一个有趣的问题。 我有一个组件，当根据props.doctype变量加载组件时，它会从服务器请求html流：

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

到该组件的路由如下所示：

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

和链接：

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

我遇到的问题是，当Legal组件加载时，它正确地从服务器加载了相关的html。 但是，如果我按浏览器上的“后退”按钮，然后按“前进”按钮，则会得到一个空白页面，没有错误。 我的路由方式是否存在问题？

*编辑*登录组件：

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

我认为问题出在这里：

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

像这样进行路由时，在Legal组件中有doctype属性，但是当您直接从url中加载该组件时，例如http://localhost:3000/Login/Terms ，该组件就不再具有doctype属性，因此无法适当地获取HTML内容并呈现白屏。