反应。 你不应该使用<withRouter(App) />外面<Router>

Question

我试图在 React 中实现一个 withRouter，所以我像这样导入了它

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

然后在最后一行我写了以下内容

export default withRouter(App);

但我收到一个错误

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

我试图在我的 app.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);

那里可能有什么问题？ 我实际上在那里有一个浏览器路由器，它不应该也是一个路由器吗？

Answer 1

您在App有BrowserRouter ，但是当您使用withRouter时，使用withRouter呈现子withRouter的父withRouter需要具有BrowserRouter 。

所以从App删除BrowserRouter并在BrowserRouter渲染App

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

此外，如果您将方法用作箭头函数，则不需要存储this上下文，因为它始终会指向类实例

Answer 2

问题很可能来自您正在执行的身份验证检查。 无论结果如何，您都将组件包装在 withRouter() 中，因此如果 authenticationChecked 为 false withRouter() 无法访问任何路由，因此您的错误。

您的解决方案可能是为登录创建一个组件，然后将您的 BrowserRouter 等包装在这样的层次结构中：

return (
  <LoginProvider>
    <MyBrowserRouter>
      <Router>
    </MyBrowserRouter>
  </LoginProvider>
);

然后，您可以将 MyBrowserRouter 包装在 withRouter() 中，但根据您的身份验证检查使 LoginProvider 的呈现采用子项。