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

我认为你被迫引入一个表明观众状态的道具/州。这意味着他已登录或只是您网站的访客。

如果您点击/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

在你的情况下，我可能会在Route中使用react-router进行操作。 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和{ {1}}访问根路径（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

使用反应路由器布局路由

3 个答案: