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

与其直接传递道具，不如通过将其存储在父类组件的状态中来传递道具。通过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"));启用对BrowserHistory的支持。

代码如下：-

substitutions

单击来回浏览器时，传递道具在传递时不起作用React Router v4

1 个答案: