使用 React Router 布局路由

Question

我正在尝试使用 react-router 进行布局。

当我的用户点击 / 时，我想渲染一些布局。当我的用户点击 /login 或 /sign_up 时，我希望呈现布局，并呈现 /login 或 /sign_up 的相关组件。

目前，我的 App.js 看起来像这样

return (
  <div className={className}>
    <Route path="/" component={Auth} />
    <ModalContainer />
  </div>
);

我的Auth.js看起来像这样

return (
  <AuthFrame footerText={footerText} footerClick={footerClick}>
    <Route path="/login" component={LoginContainer} />
    <Route path="/sign_up" component={SignUpContainer} />
  </AuthFrame>
);

所以当我点击 / 时 AuthFrame 将被渲染，然后反应路由器寻找 login 或 sign_up 来渲染其他容器。

但是，当我点击 / 时，只有 AuthFrame 会呈现。

我希望 / 被视为 /login。

如何实现？

Answer 1

我认为您不得不引入一个 prop/state 来指示查看器的状态。这意味着他是否已登录或只是您网站的访客。

如果您点击 /，您的路由器显然无法呈现 /login，但路由器允许您重定向到另一个页面：

class AuthContainer extends React.Component {
    defaultProps = {
        loggedIn: false
    }

    render() {

        return <div>
            <Route path="/login" component={LoginContainer}/>
            <Route path="/sign_up" component={SignUpContainer}/>
        </div>
    }
}

class PublicHomePage extends React.Component {
    render() {

        return <div>
            <Route path="/settings" component={SettingsComponent}/>
            <Route path="/profile" component={ProfileComponent}/>
            <Route path="/and_so_on" component={AndSoOnComponent}/>
        </div>
    }
}


class App
    extends React.Component {
    defaultProps = {
        loggedIn: false
    }

    render() {

        const {loggedIn} = this.props;

        if (loggedIn) {
            return <PublicHomePage/>
        }


        return <Route exact path="/" render={() => (
            <Redirect to="/login"/>
        )}/>


    }
}

希望这段代码对你有用。它不是很完美，但它应该能让您了解如何解决您的问题。

Answer 2

在你的情况下，我可能会在 react-router 中使用 Routes 进行一些操作。 AuthFrame 中的这段代码应该可以解决问题：

return (    
    <AuthFrame footerText={footerText} footerClick={footerClick}>
         {["/", "/login"].map((path, ind) =>
            <Route exact key={ind} path={path} component={LoginContainer} />
         )}
         <Route exact path="/sign_up" component={SignUpContainer} />
    </AuthFrame>);

注意 exact 在路由上的用法，这是为了防止在 /sign_up 上匹配登录组件，因为它也会匹配 / 并防止呈现两者 login和 signup 访问根路径时 (/).

Answer 3

Switch 组件在这些情况下很有用：

return (
  <AuthFrame footerText={footerText} footerClick={footerClick}>
    <Switch>
      <Route path="/login" component={LoginContainer} />
      <Route path="/sign_up" component={SignUpContainer} />
      {/* Default route in case none within `Switch` were matched so far */}
      <Route component={LoginContainer} />
    </Switch>
  </AuthFrame>
);

参见：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md

使用 React Router 布局路由

Layout routes with react router

reactjs

react-router

react-router-v4