React. Вы не должны использовать снаружи <Router>

Question

Я пытаюсь реализовать withRouter в React, поэтому я импортировал его так:

import { BrowserRouter, Route, Switch , withRouter} from "react-router-dom";

И затем в последней строке я написал следующее

export default withRouter(App);

Но я получаю ошибку

You should not use <withRouter(App) /> outside a <Router>

Я пытаюсь реализовать ее в моем приложении. js, которая выглядит следующим образом

   class App extends React.Component {

    constructor(props) {
        super(props);

        console.log("PROPS APPJS")
        console.log(props)

        //checks if user is autheticated within the system in order to manage routes
        this.state = {
            authenticationChecked: false,
            isAuthenticated: false 
        }  

    }

    componentDidMount() {
        //calls the auth service to decide the auth state value
        isAuthenticated().then((result) => {
            if (result === true) {
                this.setState({ isAuthenticated: true, authenticationChecked: true})
            } else {
                this.setState({ isAuthenticated: false, authenticationChecked: true})
            }
        });
    }

    login = (email, password) => {
        var thiscomponent  = this;

        axios({
            method: 'post',
            url: 'http://localhost:3003/login',
            data: qs.stringify({ email, password }),
            headers: {
                'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
            }
        }).then(res => {
            console.log("set cookie")
            //the accestoken is set as a cookie in order to check routes
            Cookies.set('accesstoken', res.data.accesstoken);
            console.log("those are the props")
            console.log(this.props);
            this.setState({ isAuthenticated: true }, () => {
               thiscomponent.props.history.push('/'); 
            })

        }).catch(err => {
            console.log(err)
        })  
    }


    render() {
        if (!this.state.authenticationChecked) return null;

        return (

                <BrowserRouter>
                    <Switch>

                        <Route exact path="/login" render={(props) => <LoginPage login={this.login} {...props} />} />
                        <PrivateRoute authed={this.state.isAuthenticated} exact path="/register" render={(props) => <RegisterPage />} />
                        <PrivateRoute authed={this.state.isAuthenticated} exact path="/" render={(props) => <NewLandingPage  {...props}  />} />
                        <PrivateRoute authed={this.state.isAuthenticated} path="/page1" render={(props) => <Page1 />} />
                        <PrivateRoute authed={this.state.isAuthenticated} path="/page2" render={(props) => <Page2 />} />

                    </Switch>
                </BrowserRouter>
        )
    }
}
export default withRouter(App);

В чем может быть проблема там? У меня там на самом деле есть browserrouter, разве он тоже не должен быть роутером?

Answer 1

У вас есть BrowserRouter внутри App, но при использовании withRouter родитель, который отображает ребенка с withRouter, должен иметь BrowserRouter.

Так что удалите BrowserRouter из App и рендер App внутри BrowserRouter

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter, 
  container
)

Также, если вы используете методы в качестве функций стрелок, вам не нужно хранить контекст this, так как он всегда будет указывать на экземпляр класса

Answer 2

Скорее всего, проблема связана с проверкой аутентификации, которую вы проводите. Независимо от результата, вы оборачиваете компонент в withRouter (), так что, если параметру authenticationChecked является false, у withRouter () нет доступа к каким-либо маршрутам, поэтому ваша ошибка.

Возможно, вы решили создать компонент для логин, который затем оборачивает ваш BrowserRouter et c., в иерархию, примерно такую: проверьте.