Question

我是React JS的新手。我正在尝试实施私有路线概念。

    <a tabindex="0" class="paginate_button next disabled" id="table_id_next" aria-controls="table_id" data-dt-idx="2">

<img width="10" height="10" title="Next" src="/tibcoherence/images/icons/ic-next.png">

</a>

Privatecomponent.js

Main.js

class Main extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            error: false,
            hasUserLogIn: false,
            dataFetched: false,
            isFetching: false,
        }
    }

    render() {
        const template =
            <Switch>
                <PrivateRoute exact path="/login" component={LoginComponent} />
                <PrivateRoute exact path="/QuizSetupMain" component={QuizSetupMain} />
                <PrivateRoute exact path="/" component={LandingScreen} />
            </Switch>
        return (
            <div>
              {template}
            </div>
        )
    }
}


function mapStateToProps(state) {
    return {
        hasUserLogIn: state.LoginReducer.hasUserLogIn,
        isFetching: state.LoginReducer.isFetching
    }
}

export default connect(mapStateToProps)(Main);

所以，我想做的是如果用户尚未登录，则应将用户重定向到登录组件，否则应将用户重定向到登录屏幕组件。因此，我是按照以下方式进行的。

，但是它在URL中添加了import React from 'react'; import { Route, Redirect, withRouter } from 'react-router-dom'; import { connect } from 'react-redux'; const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => { return <Route {...rest} render={ props => { return isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: "/login", state: { from: props.location } }} /> ) } } /> }; const mapStateToProps = state => ( { // isAuthenticated value is get from here isAuthenticated: state.LoginReducer.hasUserLogIn } ); export default withRouter(connect( mapStateToProps, null, null, { pure: false } )(PrivateRoute));，但是该组件没有被渲染。所以，有人可以帮我吗？

/login

我正在执行此操作以重定向用户。

Answer 1

您需要更正两件事，

首先：登录路由不必是PrivateRoute，因为未经身份验证的用户应该可以访问它”

第二：您需要使用Router来封装您的路由，class Main extends React.Component { constructor(props) { super(props); this.state = { error: false, hasUserLogIn: false, dataFetched: false, isFetching: false, } } render() { const template = <Switch> <Route exact path="/login" component={LoginComponent} /> <PrivateRoute exact path="/QuizSetupMain" component={QuizSetupMain} /> <PrivateRoute exact path="/" component={LandingScreen} /> </Switch> return ( <BrowserRouter> <div> {template} </div> </BrowserRouter> ) } }是父级组件中某个级别的提供者

<trans-unit id="interpolated-time" datatype="html">
    <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
    <target>Actualizado: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
  </trans-unit>
  <trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
    <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
    <target>{VAR_PLURAL, plural, =0 {justo ahora} =1 {hace 1 minuto} other {hace <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutos por {VAR_SELECT, select, male {un hombre} female {una dama} other {otro} }} }</target>
  </trans-unit>

Answer 2

登录路径必须是公共（而不是私有），因为您的用户可以通过该页面进行身份验证

基本上，替换

<PrivateRoute exact path="/login" component={LoginComponent} />

与

<Route exact path='/login' component={LoginComponent} />

反应私有路由不渲染登录组件

2 个答案: