使用React Router时传递状态的最简单方法是什么？

如何解决使用React Router时传递状态的最简单方法是什么？

使用React Router时传递状态的最简单方法是什么？我下面的Navi组件反映的是用户为null，而不是用户为“ KungLoad”。谢谢。

class App extends Component{
  constructor() {
    super();
    this.state = {user: "KungLoad"};
}
  render () {
    return(
    <div>
<Router> 
    <Route exact path="/" state  component = {Navi} />
  </Router>

解决方法

最简单的方法是，您可以将状态作为道具传递，然后在指定的组件中使用它。对于您的情况，您必须使用render而不是component来传递状态作为道具。

<Route exact path="/" render={() => <Navi user={this.state.user} />}  />

这将起作用，但是我建议您使用react Context API概念最适合这里。您可以使用数据提供程序将状态或道具传递给所有组件，并且所有组件都会使用父组件正在提供的状态或道具。 。 https://reactjs.org/docs/context.html

,

Yiu可以将道具作为道具传递给Navi组件，例如：-Dsonar.coverage.exclusions=**/exceptions/*.*

,

我想我在这里找到了答案：

Passing state and props through React Router

<Route exact path="/" render={() => {return <Navi user={"KungLoad"} />;

,

其他答案是正确的，您应该通过道具将状态传递给子组件。我添加我的答案以强调可以使用Route组件的另一种方式。如果仅将子级添加到Route组件中，而不是使用render或component属性，则代码看起来更简洁，更易于阅读。

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: "KungLoad"
    };
  }

  render() {
    return (
      <div>
        <Router>
          <Route exact path="/">
            <Navi user={this.state.user} />
          </Route>
        </Router>
      </div>
    );
  }
}

,

1. 设置状态并分配值后

    I want to get enddate by + 1 day 
   $data=[
                       "title" =>$event->event_name,"start" =>$event->start_date,"end" =>new \DateTime($event->end_date.'1 day'),"textColor" =>"white","backgroundColor" =>"black",];
   

2. 将状态值传递到路由器就是这样。

   this.state = {user: "KungLoad"};
   

3. 或者如果您要用户未登录，请使用重定向

   <Router> 
    <Route exact path="/" render={()=> (<Navi user={this.state.user}/>)}   />
   </Router>