Reactjs 反应您不应该使用<；使用路由器（应用程序）/>；a<；路由器>；

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

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

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

export default withRouter(App);

但是我收到一个错误

您不应在外部使用

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
log（“道具APPJS”）
控制台日志（道具）
//检查用户是否已在系统内授权以管理路由
此.state={
authenticationChecked:false，
I验证：错误
}  
}
componentDidMount（）{
//调用身份验证服务以确定身份验证状态值
isAuthenticated（）。然后（（结果）=>{
如果（结果==真）{
this.setState（{isAuthenticated:true，authenticationChecked:true}）
}否则{
this.setState（{isAuthenticated:false，authenticationChecked:true}）
}
});
}
登录=（电子邮件、密码）=>{
var thiscomponent=this；
axios({
方法：“post”，
网址：'http://localhost:3003/login',
数据：qs.stringify（{email，password}），
标题：{
“内容类型”：“application/x-www-form-urlencoded；charset=utf-8”
}
})。然后（res=>{
log（“设置cookie”）
//accestoken设置为cookie以检查路由
Cookies.set（'accesstoken'，res.data.accesstoken）；
log（“这些是道具”）
console.log（this.props）；
this.setState（{isAuthenticated:true}，（）=>{
thiscomponent.props.history.push（'/'）；
})
}).catch（错误=>{
console.log（错误）
})  
}
render（）{
如果（！this.state.authenticationChecked）返回null；
返回(
} />
} />
} />
} />
} />
)
}
}
使用路由器（App）导出默认值；

---

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

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

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

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

返回(
);

---

然后，您可以将MyBrowserRouter包装为withRouter（），但要根据您的身份验证检查使LoginProvider的呈现包含子项。

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

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

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

返回(
);

---

然后可以用router（）将MyBrowserRouter包装起来但是，根据您的身份验证检查将LoginProvider呈现为take children。

您在

App

中有

BrowserRouter

，但是当您使用

withRouter

时，使用

withRouter

呈现孩子的家长需要有

BrowserRouter

因此，从

App

中删除

BrowserRouter

，并在

BrowserRouter

ReactDOM.render(
, 
容器
)

---

此外，如果您使用方法作为箭头函数，则不需要存储

此

上下文，因为它将始终指向类实例

您在

应用程序

中有

浏览器路由器

，但当您使用

withRouter

时，使用

withRouter

呈现子对象的父对象需要

浏览器路由器

因此，从

App

中删除

BrowserRouter

，并在

BrowserRouter

ReactDOM.render(
, 
容器
)

---

另外，如果使用方法作为箭头函数，则不需要存储

此

上下文，因为它总是向类实例指出

您试图使用

with router

做什么？因为通读它听起来并不像是为了你的代码所暗示的那样，你认为它对你的工作有帮助。@Mike'Pomax'Kamermans在我的登录函数中，

var thiscomponent=this

的计算结果是未定义的，所以我无法使用

thiscomponent.props.history.push（）

，根据我的理解，正如我在那里建议的那样，我应该使用withrouter来填充historySure，但这是另一个问题：如果希望

this

有意义，请将其转换为普通类函数而不是静态属性。（

login（email，password）{…}

而不是箭头函数）这不会计算为未定义，但props.history会计算为未定义，因为您的历史记录在该类的props中不可用，除非您在BrowserRouter中。箭头函数中的此项表示此项的父项。这很好地存在。看看这里：->Asaf Aviv是正确的。不过，你想用路由器来做什么？因为通读它听起来不像是为了你的代码表明你认为它对你的工作有帮助。@Mike'Pomax'Kamermans在我的登录函数中，

var thiscomponent=this<