[英]Using ReactJS, how can I use Route to display different components?
我是 ReactJS 的新手,并试图确定我是否可以将它用于我正在构建的应用程序。
我已经创建了登录和注册页面,但是我在这两个页面中都有一些相同的代码,我想重新使用它。
所以,目前,我有两个独立的页面,构建为组件,并像这样路由:
const App = () => (
<Router>
<div>
<Route path={ROUTES.REGISTER} component={RegisterPage} />
<Route path={ROUTES.SIGNIN} component={SignInPage} />
<Route component={SignInPage} />
</div>
</Router>
);
所以如果我 go 到 /register 我看到 RegisterPage 组件,如果我 go 到 /signin 我看到 SignInPage 组件。 (如果我 go 到其他任何东西,我会看到 SignInPage。)
但是,我还有几个页面要添加,风格相同,我希望能够有一个通用的“登陆页面”,在其中显示适当的组件。 然后,一旦用户登录,我想要一个显示适当组件的“仪表板页面”。
因此,LandingPage 和 DashboardPage 将只是其他组件的包装器,我希望 Routes 像这样工作:
'landingpage/SignInPage' - 显示 LandingPage 样式,SignIn 组件位于 'landingpage/Register' - 显示 LandingPage 样式,Register 组件位于 'landingpage' - 显示 LandingPage 样式,SignIn 组件位于 'dashboardpage/' - 显示默认仪表板
我以为我可以做这样的事情:
const App = () => (
<Router>
<div>
<Route path={ROUTES.LANDINGPAGE} component={LandingPage} subPage={SignInForm} />
<Route path={ROUTES.REGISTER} component={LandingPage} subPage={RegisterForm} />
<Route path={ROUTES.SIGNIN} component={LandingPage} subPage={SignInForm} />
<Route path={ROUTES.DASHBOARD} component={DashboardPage} subPage={Overview} />
<Route component={LandingPage} subPage={SignInForm} />
</div>
</Router>
);
但我无法计算出确切的语法。 “子页面”是否作为 state 或道具传入? 如何使用它来正确呈现页面?
我在网上找不到任何东西来告诉我如何做到这一点,这让我觉得我可能走错了路。 如果是这样,正确的方法是什么?
您需要使用渲染道具将自定义道具传递给渲染组件
const App = () => (
<Router>
<div>
<Route path={ROUTES.LANDINGPAGE} render={(rProps) => <LandingPage {...rProps} subPage={SignInForm} />}/>
<Route path={ROUTES.REGISTER} render={(rProps) => <LandingPage {...rProps} subPage={RegisterForm} />}/>
<Route path={ROUTES.SIGNIN} render={(rProps) => <LandingPage {...rProps} subPage={SignInForm} />}} subPage={SignInForm} />
<Route path={ROUTES.DASHBOARD} render={(rProps) => <DashboardPage {...rProps} subPage={Overview} />}} />
<Route render={(rProps) => <LandingPage {...rProps} subPage={SignInForm} />} />
</div>
</Router>
);
但是,您可以编写一个自定义 Route,将 LandingPage 呈现为如下布局
const RouteWithLayout = ({subPage, component: Component,...props}) => {
return <Route {...props} render={(rProps) => <Component {...rProps} subPage={subPage} />} />
}
并像使用它一样
const App = () => (
<Router>
<div>
<RouteWithLayout path={ROUTES.LANDINGPAGE} component={LandingPage} subPage={SignInForm} />
<RouteWithLayout path={ROUTES.REGISTER} component={LandingPage} subPage={RegisterForm} />
<RouteWithLayout path={ROUTES.SIGNIN} component={LandingPage} subPage={SignInForm} />
<RouteWithLayout path={ROUTES.DASHBOARD} component={DashboardPage} subPage={Overview} />
<RouteWithLayout component={LandingPage} subPage={SignInForm} />
</div>
</Router>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.