javascript - 使用 navLInk 的路由组件反应

Question

我正在尝试路由链接并传递数据。问题是当我在新闻组件上收到它时，我传递给它的所有东西都返回一个未定义的..

应用程序.js

<BrowserRouter>
    <Route path="/news" component={News} />
</BrowserRouter>

父.js

          <NavLink to={{
            pathname: '/news',
            state : { all : this.props.content} // this is what I want to send and I receive it from another
          }}>Todo</NavLink>

新闻.js

export default class News extends React.Component {
constructor(props){
    super(props)
}

render(){
    const foo = this.props.location.state
    console.log(foo) // Cannot read property 'state' of undefined..
    console.log(this.props.location) // return undefined
    console.log(this.props) // return empty {}

    return (

        <div className='container'>
                   <section>
                       <h1>hello world </h1>
                   </section>
       </div>

   )
}

}

标签： javascriptreactjsreact-router

Answer 1

我不确定parent.js您的网站结构中的位置。但我已经为你做了一个代码沙盒示例。

我已经在其中定义了一个 defaultProp，parent.js因此将一些数据传递给了，NavLink但是您应该能够根据需要重新构建示例。

https://codesandbox.io/s/jp4qr3q3ww?autoresize=1&expanddevtools=1&fontsize=14

app.js (index.js)

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

import News from "./news.js";
import Parent from "./parent.js";

import "./styles.css";

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Parent} />
      <Route path="/news" component={News} />
    </BrowserRouter>
  );
}

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

父.js

import React from "react";
import { NavLink } from "react-router-dom";

const Parent = props => (
  <NavLink
    to={{
      pathname: "/news",
      state: { all: props.content } // this is what I want to send and I receive it from another
    }}
  >
    Todo
  </NavLink>
);

Parent.defaultProps = {
  content: "some content"
};

export default Parent;

新闻.js

import React from "react";

export default class News extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const foo = this.props.location.state;
    console.log(foo); // Cannot read property 'state' of undefined..
    console.log(this.props.location); // return undefined
    console.log(this.props); // return empty {}

    return (
      <div className="container">
        <section>
          <h1>hello world </h1>
        </section>
      </div>
    );
  }
}