Question

我正在使用React Router v4制作仪表板。我有诸如“注册”，“登录”，“添加和列出产品”，“添加和列出客户”之类的页面。

身份验证页面，“注册”和“登录”页面具有各自的布局，不，页眉，页脚或导航菜单。其余部分使用相同的布局设计，包括页眉，导航菜单和页脚。

我已经尝试过了：

// App.tsx

return (
  <Router>
    <Route exact path="/" component={Layout}>
      <Route exact path="/" component={Status} />
      <Route path="/welcome" component={Welcome} />
    </Route>
    <Route path="/signup" component={SignUp} />
    <Route path="/signin" component={SignIn} />
  </Router>
);

// Layout.tsx

return (
  <React.Fragment>
    <Header lastName="Wahaha" />
    <Navbar />
    {children}
    <Footer description="Thanks for visiting!" />
  </React.Fragment>
);

<Header />，<Navbar />和<Footer />并未出现。

从此处获取参考：Using multiple layouts for react-router components，但这对我不起作用。

请帮助。

Answer 1

在我的项目中，我使用创建特定的路线来处理该问题。例如，我有RouteAuthenticated，RouteUnauthenticated，RouteAdmin ...

// RouteAuthenticated

import { Redirect, Route } from 'react-router-dom';

class RouteAuthenticated extends React.Component<Props, State> {
    constructor(props) {
        super(props);
        this.state = {
            isAuthenticated: false,
            loading: true,
        };
    }

    async componentDidMount() {
        const isAuthenticated = CHECK IF IS AUTHENTICATED
        this.setState({
            isAuthenticated,
            loading: false,
        });
    }

    render() {
        const { component: Component, ...rest } = this.props;
        const { isAuthenticated, loading } = this.state;
        const renderRoute = props =>
            isAuthenticated === true ? (
                <Layout>
                    <Component {...props} />
                </Layout>
            ) : (
                <Redirect to="/signup" />
            );
        return loading ? null : <Route {...rest} render={renderRoute} />;
    }
}

export default RouteAuthenticated;

通过这种方式，我可以在单个组件中处理包装和身份验证。

在App.tsx

// App.tsx

return (
  <Switch>
    <RouteAuthenticated exact path="/" component={Status} />
    <RouteAuthenticated path="/welcome" component={Welcome} />
    <RouteUnauthenticated path="/signup" component={SignUp} /> // or     <Route path="/signup" component={SignUp} />
    <RouteUnauthenticated path="/signin" component={SignIn} /> // or     <Route path="/signin" component={SignIn} />
  </Switch>
);

如何使用React Router制作多页和布局（或）容器？

1 个答案: