Question

我有以下代码：

function PrivateRoute({ component: Component, auth, ...rest }) {
    return (
        <Route
            {...rest}
            render={props =>
                auth === true ? (
                    <Component {...props} />
                ) : (
                    <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
                )
            }
        />
    );
}

function PublicRoute({ component: Component, auth, ...rest }) {
    return <Route {...rest} render={props => (auth === false ? <Component {...props} /> : <Redirect to="/dashboard" />)} />;
}

export default () => (
    <BrowserRouter>
        <Switch>
            <PublicRoute auth={true} path="/login" exact component={Login} />
            <PrivateRoute auth={true} path="/news" exact component={News} />
            <PrivateRoute auth={false} path="/blogs" exact component={Blog} />
            <Route render={() => <h3>No Match</h3>} />
        </Switch>
    </BrowserRouter>
);

我想在下面添加此内容以跟踪经过身份验证的道具：

function mapStateToProps(state) {
  return {
    auth: state.authenticated
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(?);

但是，我不确定如何将其添加到功能代码中。我需要将导出默认部分转换为类吗？

Answer 1

但是，我不确定如何将其添加到功能代码中。我需要将导出默认部分转换为类吗？

不，你不知道。仅当您要使用状态，生命周期方法或refs时才需要将功能组件转换为基于类的组件（而且自Hooks到来，甚至在这些情况下甚至都不需要）。

只需将导出的组件放在变量中，而不是将其导出，然后将该变量与connect结合使用：

const RouterComponent = ({ auth }) => (
    <BrowserRouter>
        <Switch>
            <PublicRoute auth={auth} path="/login" exact component={Login} />
            <PrivateRoute auth={auth} path="/news" exact component={News} />
            <PrivateRoute auth={auth} path="/blogs" exact component={Blog} />
            <Route render={() => <h3>No Match</h3>} />
        </Switch>
    </BrowserRouter>
);

function mapStateToProps(state) {
  return {
    auth: state.authenticated
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(RouterComponent);

Answer 2

首先，请不要执行未命名的默认导出，您可以将其重写为：

const MyRouter = (props) => (
    <BrowserRouter>
        <Switch>
            <PublicRoute auth={true} path="/login" exact component={Login} />
            <PrivateRoute auth={true} path="/news" exact component={News} />
            <PrivateRoute auth={false} path="/blogs" exact component={Blog} />
            <Route render={() => <h3>No Match</h3>} />
        </Switch>
    </BrowserRouter>
);

然后您可以轻松地进行操作（还请注意，您只能从文件中进行一次默认导出）。

export default connect(mapStateToProps, mapDispatchToProps)(MyRouter);

请注意，我在props组件中添加了MyRouter作为参数。现在，您可以在其中使用道具并将auth={props.auth}传递到PrivateRoute组件中。

在React中调用道具的正确方法

2 个答案: