带有渲染组件的 React Router 层次结构

Question

我将 object 传递给 class 组件，并希望在不同的路径中打开该组件。 路由有效，但除非我将 <Route path=''...> 行移到其他所有组件之前，否则子组件中的道具始终未定义。 道具有效，但页面显示不正确。

家长

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Header from "./Header";
import DarbaiLT from "./DarbaiLT";
import AnObject from "./AnObject";

let clickeddiv = ''

class App extends Component {
   onObjectClick = (clickeddivffromdarbai) => {
    clickeddiv =  clickeddivffromdarbai;
    console.log("clickeddiv: ", clickeddiv);
  };

    *//clickeddiv is data coming from DarbaiLT component*
  };
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <Route path="/object/:id" exact component={AnObject} />
            <Route path="/about" exact component={About} />
            <Route path="/contacts" exact component={Contacts} />
            <Route path="/partners" exact component={Partneriai} />
            <DarbaiLT onObjectClick={this.onObjectClick} />
            <AnObject dataforComponent={clickeddiv}/>     //when this line is the last, it's not working
          </Switch>
          <Footer />
        </div>
      </Router>
    );
  }
}

export default App;

孩子

import React, { Component } from "react";

class AnObject extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <>
        <div onClick={() => console.log(this.props.dataforComponent)}>
          <img src='../smth/pic.jpg' width="100%" />
        </div>
      </>
    );
  }
}

export default AnObject;

如果我将该行移至顶部，则传递道具有效，但是所有页面仅显示 AnObject，并且不呈现 About、Contacts 等...

 <Router>
        
        <div>
          
          <Header />
          <Slides />
          <Switch> 
            <AnObject stateforyou={clickeddiv}/>         //if the line is here, routing doesn't work
            <Route path="/object/:id" exact component={AnObject} />
            <Route path="/about" exact component={About} />
            <Route path="/contacts" exact component={Contacts} />
            <Route path="/partners" exact component={Partneriai} />
            <DarbaiLT onObjectClick={this.onObjectClick} />
          </Switch>
          <Footer />
        </div>
      </Router>

Answer 1

我不确定我是否完全理解这个问题。 但是当您在 react-router 中使用<Switch>时，它只会渲染第一个匹配项。

你有一个这样的开关设置：

<Switch>
    <Route path="/about" exact component={About} />
    <DarbaiLT onObjectClick={this.onObjectClick} />
    <AnObject dataforComponent={clickeddiv}/>
</Switch>

这意味着如果访问者位于 url /about ，它将仅呈现About组件，而不会呈现其他任何内容。 如果您希望能够同时渲染多个组件作为同级组件，请删除<Switch>...</Switch> 。

Answer 2

React Router 的文档指出：“< Switch > 的所有子节点都应该是 < Route >”。 使用 react-router Switch 就像使用 javascript 的 switch case 语句一样，只要链接与路由匹配，传递的组件就会被渲染。 但是，您的问题是如何将道具传递给以这种方式完成的渲染组件：

      <Switch> 
        <Route path="/object/:id" exact component={() => <AnObject stateforyou={clickeddiv}/> } />
        <Route path="/about" exact component={About} />
        <Route path="/contacts" exact component={Contacts} />
        <Route path="/partners" exact component={Partneriai} />
      </Switch>