[英]Getting React Props after sending it from Route
I Am Sending React Component from a route as mention in this Link 我正在从此链接中提到的路线发送React组件
<Route path='/StartCompaign' render={(props) => <CampaignStart {...props} isDashboard={true} /> } />
and i am getting props in another Component like 我在另一个组件中获取道具
{props.childern.render.isDashboard ? <Header /> : "NO" }
APP.JSX file 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>
);
I am trying to change the <Header/>
and <TopNavigation />
in react application when the specfic route is called but props.isDashboard
seemed undefined
当特定路由被调用但
props.isDashboard
似乎undefined
时,我试图在react应用程序中更改<Header/>
和<TopNavigation />
It's because you are sending props to <Dashboard/>
component 这是因为您要向
<Dashboard/>
组件发送道具
<Dashboard {...props} isDashboard={true} />
but not to <Layout />
component. 而不是
<Layout />
组件。 If Layout component needs to receive isDashboard props you need to pass it like 如果布局组件需要接收isDashboard道具,则需要像这样传递它
<Layout isDashboard={true} />
As Layout is parent component, if child components also needs the props you could always pass those to children easily. 由于Layout是父组件,因此如果子组件也需要道具,则可以随时将其传递给子组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.