Javascript 无法与react router dom的路由器一起使用

我是新手。在这里，我试图使用路由器的

来获取我的位置信息

所以，我有以下结构

index.js

ReactDOM.render(
  <App />
  , document.getElementById('root'));

 <Provider store={store}>
        <div>
          <Header />
          <Main />
        </div>
      </Provider>

return (
      <Router history={history}>
        <div>
          {this.props.isFetching && <Loading />}
          <Switch>
            <PrivateRoute exact path="/" component={LandingPage} />
            <PrivateRoute exact path="/create-job" component={NewJob} />
            <PrivateRoute exact path="/user-jobs" component={JobList} />
            <Route exact path="/login" component={Login} />
          </Switch>
        </div>
      </Router>

我试着用这种方法。所以，它给了我以下的错误

You should not use <Route> or withRouter() outside a <Router>

您不应在

我在这里做错了什么？
您需要将
组件移到
组件中，否则它就不能像错误所说的那样工作。
您需要将
组件移到
组件中，否则它就不能像错误所说的那样工作。
您正在
路由器
组件外部渲染
头
组件（它使用
with Router
）。您需要确保所有
路由
以及使用
with Router
的组件都需要是层次结构中某个级别的
路由器
的子级

在您的情况下，可以使用
路由器
在
应用程序
中包装
div

来源的详细信息

当
路由
未从其路径传递
上下文
时，会生成错误。而且，它只是
路由
上的一个包装器。上下文不可用的唯一时间是
路由
未嵌套在
路由器
的某个位置。
您正在
路由器
组件外部渲染
头
组件（使用
带路由器
）。您需要确保所有
路由
以及使用
with Router
的组件都需要是层次结构中某个级别的
路由器
的子级

在您的情况下，可以使用
路由器
在
应用程序
中包装
div

来源的详细信息

当
路由
未从其路径传递
上下文
时，会生成错误。而且，它只是
路由
上的一个包装器。上下文不可用的唯一时间是当
路由
未嵌套在
路由器
的某个位置时。
您的问题是，如果路由器道具被PureComponent检查阻止，请将其置于连接后：

export default connect(mapStateToProps, {  logout  })(withRouter(Header));

见：

就我个人而言，我更喜欢将我的提供商放在index.js而不是App.js中的一个位置，你的整个应用程序应该包装在路由器中，而不是App.js的一部分：

const WrappedApp = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

ReactDOM.render(WrappedApp, document.getElementById('root'));

const WrappedApp=(
);
render（WrappedApp，document.getElementById（'root'）；
您的问题是，withRouter道具被PureComponent检查阻止，请将其置于连接后：

export default connect(mapStateToProps, {  logout  })(withRouter(Header));

见：

就我个人而言，我更喜欢将我的提供商放在index.js而不是App.js中的一个位置，你的整个应用程序应该包装在路由器中，而不是App.js的一部分：

const WrappedApp = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

ReactDOM.render(WrappedApp, document.getElementById('root'));

const WrappedApp=(
);
render（WrappedApp，document.getElementById（'root'）；
所以您需要做两件事，在报头中注入状态，并在报头中注入路由信息。
如果您在
组件之外，您将无法使用withRouter（，原因很简单，因为您将没有任何匹配道具链接到您的组件

你需要做的是创建一个叫做布局的东西，然后像这样使用页面定义中的布局

假设您有此路线

现在在登陆页面中，你需要做如下操作

landingPageContainer.js
render() {
   return (
    <SimpleLayout header={<Header ...this.props/> footer={<Footer ...this.props/>}>
       <LandingPageDummyPage ...this.props/>
    <SimpleLayout/>
   );
}
export default connect(withRouter(LandingPageContainer);

landingPageContainer.js
render（）{
返回(
);
}
导出默认连接（使用路由器（LandingPageContainer）；

这会将传递到简单布局的所有道具复制到您的着陆页面布局、页眉和页脚

simpleLayout.js
render() {
   return (
    <div>{this.props.header} </div>
    <div>{this.props.children} </div>
    <div{this.props.footer} </div>
   );
}

export withRouter(SimpleLayout);

advice . read the router documentation and try to understand whats the purpose if it... you didn`t quite get it :) ... 


simpleLayout.js
render（）{
返回(
{this.props.header}
{this.props.children}
所以您需要做两件事，在报头中注入状态，并在报头中注入路由信息。
如果您在
组件之外，您将无法使用withRouter（，原因很简单，因为您将没有任何匹配道具链接到您的组件

你需要做的是创建一个叫做布局的东西，然后像这样使用页面定义中的布局

假设您有此路线

现在在登陆页面中，你需要做如下操作

landingPageContainer.js
render() {
   return (
    <SimpleLayout header={<Header ...this.props/> footer={<Footer ...this.props/>}>
       <LandingPageDummyPage ...this.props/>
    <SimpleLayout/>
   );
}
export default connect(withRouter(LandingPageContainer);

landingPageContainer.js
render（）{
返回(
);
}
导出默认连接（使用路由器（LandingPageContainer）；

这会将传递到简单布局的所有道具复制到您的着陆页面布局、页眉和页脚

simpleLayout.js
render() {
   return (
    <div>{this.props.header} </div>
    <div>{this.props.children} </div>
    <div{this.props.footer} </div>
   );
}

export withRouter(SimpleLayout);

advice . read the router documentation and try to understand whats the purpose if it... you didn`t quite get it :) ... 


simpleLayout.js
render（）{
返回(
{this.props.header}
{this.props.children}
您需要使用
组件包装
标题
组件否，但这是withrouterno的用途。它的用途是向未定义为/in
路由
组件的组件传递
匹配
等道具。您需要使用
标题
组件包装
组件否，但withRouter的目的是什么？不，不是。它的目的是将
match
之类的道具传递给未定义为/in
Route
组件的组件是的，但这是withRouter的目的。我猜withRouter的目的是从父元素获取路由器。如果没有父路由器元素，那么It’没什么可得到的。@GaneshKaspate没有，使用路由器的
的目的是每当你没有
处理的组件时（在你的例子中是LandingPage、NewJob等），然后你可以用
withRouter
装饰它，你可以访问历史记录和其他路由器道具。我建议你将
移动到
App.js
，而不是
。
withRouter
只有在组件位于
内部时才起作用。是的，但withRouter的用途我猜是puwithRouter的用途是从父元素获取路由器。如果没有父元素