每个页面的自定义 Jumbotron

Question

我正在尝试让我的 Jumbotron 专用于该页面。因此，我在 App.js 中创建了用户类型数组，同时我在此页面上将类型作为道具发送：

const userTypes = {
    individual: [
      {
        _id: '1',
        name: 'Individual',
        quote: 'Download the app to track your code',
      },
    ],
    broker: [
      {
        _id: '2',
        name: 'Broker',
        quote: 'Download the app to see all the drivers',
      },
    ],
    dealer: [
      {
        _id: '3',
        name: 'Dealer',
        quote: 'Download the app to do something else',
      }
    ],
  };
<Route exact path="/" component={Home} id={userTypes.individual._id} type={userTypes.individual.type} quote={userTypes.individual.quote}/>
          <Route exact path="/brokers" component={Broker} id={userTypes.broker._id} type={userTypes.broker.type} quote={userTypes.broker.quote}/>
          <Route exact path="/dealers" component={Dealer} id={userTypes.dealer._id} type={userTypes.dealer.type} quote={userTypes.dealer.quote}/>

所以我想做的是在主页、经纪人和经销商页面上显示报价属性。例如，在主页中我将属性作为道具发送，所以这是我的主页：

function Home(props) {  
  const history = useHistory();  
    return (
  <Styles>
    <JumbotronClassic history={history} props={props}/>
      
  </Styles>
);
}

export default Home;

所以根据这里的道具，我期待在 Jumbotron 中看到报价，因为这是我的 Jumbotron：

const JumbotronClassic = (props) => {
  return (
    <div>
      <Jumbotron fluid>
        <Container fluid>
          <Row>
            <Col>{props.quote}</Col>
            <Col>
              <InstantQuote />
            </Col>
          </Row>
        </Container>
      </Jumbotron>
    </div>
  );
};

但不幸的是，我没有看到我期望的任何东西。所以我猜我在发送道具时做错了什么。你能检查一下，让我知道我做错了什么吗？

Answer 1

那是因为 id、type 和 quote 被传递给 Route 组件，而不是您的 component 属性中指定的组件.如果您的 Route 组件是 react-router-dom 组件，请改用 render 属性。

例如

<Route
  exact
  path="/"
  render={props => <Home {...props} id={userTypes.individual._id} type={userTypes.individual.type} quote={userTypes.individual.quote} />}
/>

每个页面的自定义 Jumbotron

Custom Jumbotron for each page

reactjs

react-bootstrap

react-props