javascript - 将路线分配给按钮

Question

嘿伙计们，我需要实现一个按钮，该按钮将分配一个路由，我在现有代码之上编写，所以我有点迷茫，有一个私有路由组件包装在 Switch 组件中。如何为我的按钮分配路线 onClick

<Switch>

   <PrivateRoute exact path="/settings" component={Settings}/>
   <PrivateRoute exact path="/admin" component={AdminButton}/>

私人路线包括以下内容

@inject('auth')
@observer
class PrivateRoute extends Component {

  render() {
    const {auth, component, ...rest} = this.props;
    const RouteComponent = component;
    const {authenticated, authenticating} = auth;
    return (
       <Route
          {...rest}
          render={props =>
             (authenticated || authenticating) ? (
                <RouteComponent {...props} />
             ) : (
                <Redirect to="/login" />
             )
          }
       />

我猜需要接收到 onClick 的 AdminButton 组件

export default class AdminButton extends React.Component {
    render() {
        return <QuestionButtonStyled onclick={}>Admin Panel</QuestionButtonStyled>
    }
}

应用程序.jsx

 <DashboardLayout>
                            {this.props.auth.authenticated && <EpMenu/> }
                            <div style={{marginTop: '20px'}}>
                                <Switch>
                                    <Route exact path="/login/:token?" component={LoginPage}/>
                                    <PrivateRoute exact path="/welcome" component={Welcome}/>
                                    <PrivateRoute exact path="/monthly-payslip" component={MonthlyPayslip}/>
                                    <PrivateRoute exact path="/yearly-tax-overview" component={YearlyTaxStatementOverview}/>
                                    <PrivateRoute exact path="/social-security-documents" component={SocialSecurityDocuments}/>
                                    <PrivateRoute exact path="/central-information-documents" component={CentralDocuments}/>
                                    <PrivateRoute exact path="/settings" component={Settings}/>
                                    <PrivateRoute exact path="/admin" component={AdminButton}/>
                                    <Redirect from="/*" to="/login"/>
                                </Switch>
                            </div>
                        </DashboardLayout>

标签： javascriptreactjs

Answer 1

由于您想更改onClick事件的路线，您可以使用historyfrom 道具并传递新路径，例如

export default class AdminButton extends React.Component {
    handleClick=() => {
       this.props.history.push('/settings');
    }
    render() {
        return <QuestionButtonStyled onClick={this.handleClick}>Admin Panel</QuestionButtonStyled>
    }
}