Link props when passed 在来回点击浏览器时不起作用 React router v4

Question

问题是...当您加载“/”主组件加载时以及当您单击“主题”时，我正在传递来自 Link 的数据并且 h1 标记中显示的数据工作正常.... （编辑）问题是一旦您单击主题并单击后退按钮，它将转到主页并再次单击前进。我可以看到从 Link 传递的数据不存在？

我希望即使在我返回并再次前进后数据仍存在

在这里创建了一个小的工作用例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

不是直接传递 props，而是通过将其存储在父 class 组件的状态中来传递。

启用对 BrowserHistory 的支持并从 the history package:

history

import { createBrowserHistory } from 'history';

const browserhistory = createBrowserHistory();

在 render() 方法的 <Router> 标签中嵌入此对象：

<Router history={browserHistory}>

完整代码：-

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"));

Link props when passed 在来回点击浏览器时不起作用 React router v4

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

reactjs

react-router-v4