当点击浏览器来回时，链接道具在传递时不起作用-反应路由器v4

Question

问题是..。当您加载“/”主组件时，当您单击“主题”时，我将从链接传递数据，并显示在h1标记中，因此工作正常.(编辑)一旦您单击“主题”并单击“上一步”按钮，该按钮将转到“主页”并再次单击“转发”。我可以看到数据是不存在的，是从链接传递的？

我希望数据在我返回并再次前进之后仍在那里。

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

与其直接传递道具，不如通过将其存储在父类组件的状态来传递它。

• 启用对BrowserHistory的支持并从历史包创建一个history对象

import { createBrowserHistory } from 'history';

const browserhistory = createBrowserHistory();

• 将此对象嵌入到<Router>标记中的render()方法中： <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"));