Компонент маршрута с использованием navLInk реагирует

Question

Я пытаюсь направить ссылку и передать данные. проблема в том, что когда я получаю это на новостном компоненте, все, что я передаю, возвращает неопределенное.

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

В зависимости от структуры вашего приложения ваш News компонент может не получать реквизиты маршрутизатора. Попробуйте объявить ваш Route следующим образом:

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

---

В качестве альтернативы, вы можете попробовать использовать withRouter:

Вы можете получить доступ к свойствам объекта history и ближайшим <Route> match через компонент высшего порядка withRouter. withRouter будет передавать обновленные match, location и history реквизиты для обернутого компонента всякий раз, когда он рендерится.

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

class News extends React.Component {
    ...
}

export default withRouter(News);

Answer 2

Я не уверен, где parent.js живет в структуре вашего сайта.Но я сделал для вас код и окно примера .

Я определил значение по умолчанию в 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);

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;

новости.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>
    );
  }
}