Правильный способ вызвать реквизит в реакции

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

Прежде всего, пожалуйста, не делайте экспорт без имени по умолчанию, вы можете переписать его так:

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 компонентам.

Answer 2

Однако я не уверен, как добавить его в функциональный код.Нужно ли преобразовывать секцию экспорта по умолчанию в класс?

Нет, не нужно.Вам нужно преобразовать функциональный компонент в компонент на основе класса, только если вы хотите использовать состояние, методы жизненного цикла или ссылки (и, возможно, даже в этих случаях после прибытия 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);