Question

我正在尝试将私有路由添加到我的应用中，但出现此错误：

“不变式失败：您不应该在<Route>之外使用<Router>”

这是我的代码：

App.js

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <Route render={({ history }) => (
                    <div className="App">
                        <Navbar history={history} />
                        <Switch>
                            <Auth path="/" component={HomePage} currUser={this.props.currUser} />
                            <Route path="/login" render={(props) => (<LoginPage {...props} login={this.props.login} />)} />
                        </Switch>
                    </div>
                )} />
            </BrowserRouter>
        );
    }
}

const Auth = ({ component: Component, ...rest }) => {
    const {currUser} = rest;
    return (
        <Route {...rest} render=
            {props =>
                currUser ?
                    (<Component {...props} currUser={currUser.name} />) :
                    (<Redirect to={{ pathname: "/login", state: currUser }} />)
            } />
    )
}

const mapStateToProps = (state) => {
    return {
        currUser: state.auth.currUser
    }
}

const mapDispatchToProps = {
    ...authActions,
}

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

我在做什么错？以及如何通过这种方法将道具从Redux状态传递给组件？

谢谢！

Answer 1

您用Auth组件包裹了App组件，因此文件应导出App。当仅导出Auth时，<Route>中的Auth标签在路由器标签之外。

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

如何使用React HOC进行认证路由？

App.js

1 个答案: