使用 ReactJS，如何使用 Route 来显示不同的组件？

Question

我是 ReactJS 的新手，正在尝试确定我是否可以将它用于我正在构建的应用程序。

我已经创建了登录和注册页面，但我在这两个页面中都有一些相同的代码，我想重新使用它。

所以，目前，我有两个独立的页面，构建为组件，并像这样路由：

const App = () => (
  <Router>
    <div>
      <Route path={ROUTES.REGISTER} component={RegisterPage} />
      <Route path={ROUTES.SIGNIN}   component={SignInPage} />
      <Route component={SignInPage} />
    </div>
  </Router>
);

所以如果我去 /register 我会看到 RegisterPage 组件，如果我去 /signin 我会看到 SignInPage 组件。 （如果我去其他任何地方，我会看到 SignInPage。）

但是，我还有几个页面要添加，风格相同，我希望能够有一个通用的“登陆页面”，其中显示适当的组件。然后，一旦用户登录，我想要一个显示适当组件的“仪表板页面”。

所以，LandingPage 和 DashboardPage 将只是其他组件的包装器，我希望路由像这样工作：

'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>
);

但我无法计算出确切的语法。 “子页面”是作为状态还是道具传入？如何使用它来正确呈现页面？

我在网上找不到任何东西来告诉我如何做到这一点，这让我觉得我可能走错了路线。如果是这样，正确的方法是什么？

Answer 1

您需要使用渲染道具将自定义道具传递给渲染组件

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>
);