使用navLInk路由组件做出反应

Question

I'm trying to route a link and pass data. the problem is when I receive it on news component, all the things i pass it to return an undefined..

app.js

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

parent.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>

news.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>

   )
}

}

Answer 1

I am not sure where parent.js lives in your site structure. But I've done a codesandbox example for you.

I have defined a defaultProp in parent.js so some data is passed to the NavLink but you should be able to restructure the example for your needs.

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

parent.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;

news.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>
    );
  }
}

Answer 2

Depending on how your app is structured your News component may not be receiving router props. Try declaring your Route as follows:

<Route
    path="/news"
    render={routerProps => <News {...routerProps}/>}
/>

---

Alternatively, you may want to try using withRouter :

You can get access to the history object's properties and the closest <Route> 's match via the withRouter higher-order component. withRouter will pass updated match , location , and history props to the wrapped component whenever it renders.

import { withRouter } from 'react-router-dom';

class News extends React.Component {
    ...
}

export default withRouter(News);