Как использовать React HOC для аутентифицированной маршрутизации?

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);