Link props when passed does not work when browser back and forth is clicked React router v4

Question

the issue is ... when you load '/' home component loads and when you click on Topics i am passing my data from Link and thats shown in h1 tag so works fine .... (edited) issue is once you click Topics and click back button which will go to Home and click forward again . I can see the data is not present that was passed from Link ?

I want the data to be present there even after i go back and do a forward again

have created a small working use case here https://codesandbox.io/s/m4lvm46myx

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

import { BrowserRouter, Route, Link } from "react-router-dom";



const topics = [
  {
    name: "Functional Programming",
    id: "functional-programming",
    description:
      "In computer science, functional programming is a programming paradigm—a style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.",
    resources: [
      {
        name: "Imperative vs Declarative programming",
        id: "imperative-declarative",
        description:
          "A guide to understanding the difference between Imperative and Declarative programming.",
        url: "https://tylermcginnis.com/imperative-vs-declarative-programming/"
      },
      {
        name:
          "Building User Interfaces with Pure Functions and Function Composition",
        id: "fn-composition",
        description:
          "A guide to building UI with pure functions and function composition in React",
        url:
          "https://tylermcginnis.com/building-user-interfaces-with-pure-functions-and-function-composition-in-react-js/"
      }
    ]
  }
];

const Resources = ({ match }) => {
  return <div>Resources</div>;
};

const Home = () => {
  return (
    <div>
      <h1>HOME </h1>
    </div>
  );
};

const Topic = ({ match }) => {
  console.log("match", match);
  const topic = topics.find(({ id }) => id === match.params.topicId);
  return (
    <div>
      <h1>{topic.name}</h1>

      <ul>
        {topic.resources.map(sub => (
          <li key={sub.id}>
            <Link to={`/topics/${match.params.topicId}/${sub.id}`}>
              {sub.name}
            </Link>
          </li>
        ))}
      </ul>
      <hr />
      <Route path={`/topics/:topicId/:subId`} component={Resources} />
    </div>
  );
};

const Topics = props => {
  console.log("Topics location props", props.location.name);
  return (
    <div>
      <h1>Link data passed : {props.location.name}</h1>
      <h1>Topics </h1>
      <ul>
        {topics.map(({ name, id }) => (
          <li key={id}>
            <Link to={`/topics/${id}`}> {name}</Link>
          </li>
        ))}
      </ul>
      <hr />
      <Route path={`/topics/:topicId`} component={Topic} />
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <h1>Nested Routers Learnings </h1>
          <ul>
            <li>
              {" "}
              <Link to="/">Home</Link>
            </li>
            <li>
              {" "}
              <Link
                to={{
                  pathname: "/topics",
                  name: "Nischith"
                }}
              >
                Topics
              </Link>
            </li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/topics" component={Topics} />
        </div>
      </BrowserRouter>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

Instead of passing the props directly, pass it by storing it in the state of the parent class component.

• Enable support for BrowserHistory and create a history object from the history package:

import { createBrowserHistory } from 'history';

const browserhistory = createBrowserHistory();

• Embed this object in <Router> tag in render() method:

  <Router history={browserHistory}>

Complete code:-

import React, { Component } from "react";
import ReactDOM from "react-dom";
//Imported this module for Browser history
import { createBrowserHistory } from "history";
import { Router } from "react-router-dom";

import { Route, Link } from "react-router-dom";

const browserHistory = createBrowserHistory();

const topics = [
  {
    name: "Functional Programming",
    id: "functional-programming",
    description:
      "In computer science, functional programming is a programming paradigm—a style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.",
    resources: [
      {
        name: "Imperative vs Declarative programming",
        id: "imperative-declarative",
        description:
          "A guide to understanding the difference between Imperative and Declarative programming.",
        url: "https://tylermcginnis.com/imperative-vs-declarative-programming/"
      },
      {
        name:
          "Building User Interfaces with Pure Functions and Function Composition",
        id: "fn-composition",
        description:
          "A guide to building UI with pure functions and function composition in React",
        url:
          "https://tylermcginnis.com/building-user-interfaces-with-pure-functions-and-function-composition-in-react-js/"
      }
    ]
  }
];

const Resources = ({ match }) => {
  return <div>Resources</div>;
};

const Home = () => {
  return (
    <div>
      <h1>HOME </h1>
    </div>
  );
};

const Topic = ({ match }) => {
  console.log("match", match);
  const topic = topics.find(({ id }) => id === match.params.topicId);
  return (
    <div>
      <h1>{topic.name}</h1>

      <ul>
        {topic.resources.map(sub => (
          <li key={sub.id}>
            <Link to={`/topics/${match.params.topicId}/${sub.id}`}>
              {sub.name}
            </Link>
          </li>
        ))}
      </ul>
      <hr />
      <Route path={`/topics/:topicId/:subId`} component={Resources} />
    </div>
  );
};

//Recieve the state
class Topics extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: this.props.location.state.name
    };
  }
  render() {
    console.log("Hi");
    console.log("Topics location props", this.state.name);
    return (
      <div>
        <h1>Link data passed : {this.state.name}</h1>
        <h1>Topics </h1>
        <ul>
          {topics.map(({ name, id }) => (
            <li key={id}>
              <Link to={`/topics/${id}`}> {name}</Link>
            </li>
          ))}
        </ul>
        <hr />
        <Route path={`/topics/:topicId`} component={Topic} />
      </div>
    );
  }
}
//Create state, include variable in it and send it.
class App extends Component {
  state = {
    name: ""
  };
  render() {
    return (
      <Router history={browserHistory}>
        <div className="App">
          <h1>Nested Routers Learnings </h1>
          <ul>
            <li>
              {" "}
              <Link to="/">Home</Link>
            </li>
            <li>
              {" "}
              <Link
                to={{
                  pathname: "/topics",
                  state: { name: "Nischith" }
                }}
              >
                Topics
              </Link>
            </li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/topics" component={Topics} />
        </div>
      </Router>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#root"));