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

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

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

因此，目前，我有两个独立页面，构建为组件，路由如下：

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

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

因此，如果我转到/register，我会看到RegisterPage组件，如果我转到/signin，我会看到SignInPage组件。如果我去别的地方，我会看到签名页

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

因此，LandingPage和DashboardPage将只是其他组件的包装器，我希望路由如下所示：

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

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

“登录页/SignInPage”-显示登录页样式，其中包含SignIn组件 “登录页/寄存器”-显示登录页样式，其中包含寄存器组件 “landingpage”-显示landingpage样式，其中包含SignIn组件 “dashboardpage/”-显示默认仪表板

我想我可以这样做：

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

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

但是我不能计算出确切的语法。子页面是否作为状态或道具传递？如何使用它来正确呈现页面

---

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

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

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

但是，您可以编写一个自定义路由，将着陆页面呈现为如下所示的布局

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

---

我认为这很有效，但我还有一个后续问题！