从 Route 发送后获取 React Props

Question

我正在从 Link

中提到的路由发送 React 组件

<Route path='/StartCompaign' render={(props) => <CampaignStart {...props} isDashboard={true} /> } />

我正在另一个组件中获取道具，例如

{props.childern.render.isDashboard ? <Header /> : "NO"  }

APP.JSX 文件

import React from 'react';
import { Route, Switch } from 'react-router';
import Layout from './components/Layout';

import Home from './components/Dynamic/Home';
import Filter from './components/Dynamic/Filter';
import { AboutCampaign } from './components/Dynamic/AboutCampaign';
import { CampaignStart } from './components/Dynamic/CompaignStart';
import NotFound from './NotFound';
import {SignUp} from './components/Static/SignUp';  
import { Login } from './components/Static/Login';  

import Dashboard from './components/Dashboard'

import { withCookies } from 'react-cookie';

class App extends React.Component {
    render() {
        return (
            <Switch>
                <Layout>
                    <Route exact path='/' component={Home} />
                    <Route path='/filter' component={Filter}/>
                    <Route path='/Campaign/:campaignId' component={AboutCampaign}/>
                    <Route path='/SignUp' component={SignUp}/>
                    <Route path='/Login' component={Login}/>
                    <Route path='/Dashboard' render={(props) => <Dashboard {...props} isDashboard={true} /> } />

                    <Route path="" component={NotFound} />
                </Layout>
            </Switch>
        );
    }
}

export default withCookies(App);

Layout.JSX

import React from 'react';
import { Container } from 'reactstrap';
import Header from './Static/Header';
import Footer from './Static/Footer';
import TopNavigation from './Component/DashBoard/TopNavigation'

export default props => (
    <div>
        {props.isDashboard ? <Header /> : <TopNavigation />  }
        <Container>
            {props.children}
        </Container>
        <Footer />
  </div>
);

我正在尝试在调用特定路由时更改 React 应用程序中的 <Header/> 和 <TopNavigation />，但 props.isDashboard 似乎 undefined

Answer 1

这是因为您正在向 <Dashboard/> 组件发送 props

<Dashboard {...props} isDashboard={true} />

但不是 <Layout /> 组件。如果 Layout 组件需要接收 isDashboard 属性，你需要像

一样传递它

<Layout isDashboard={true} />

由于 Layout 是父组件，如果子组件也需要 props，您总是可以轻松地将它们传递给子组件。

从 Route 发送后获取 React Props

Getting React Props after sending it from Route

javascript

reactjs

react-router

react-props