Question

我已经用BrowserRouter包装了我的应用程序，但是当尝试导出应用程序withRouter ( App )时，浏览器出现错误提示

  16 | return (
  17 |   <RouterContext.Consumer>
  18 |     {context => {
> 19 |       invariant(
     | ^  20 |         context,
  21 |         `You should not use <${displayName} /> outside a <Router>`
  22 |       );

我的应用是

function App() {
  const [appState, dispatch] = useContext(AppContext);
  let routes =(
    <Switch>           
        <Route path="/" component={Home} exact />
        <Route path="/faq" component={Faq} /> 
        <Redirect to="/" />
    </Switch>

  );

  if(!appState){
    routes=(
      <Switch>
          
           <Redirect to="/" />
          </Switch>
    )
  }
  
  return ( 
     <React.Fragment> 
      <BrowserRouter >        
      <Navigation /> 
      <SocialBar />
      
      <main className={classes.container}>
             <Suspense fallback={<p>loading...</p>}>
                {routes}
              </Suspense>     
      </main>

      <Footer className={classes.Footer}/>   
      </BrowserRouter >
    </React.Fragment>    
  ); 
}  

export default  withRouter ( App );

Answer 1

实际上很简单。

App组件在技术上不在路由器范围内，只有其中的组件在其中。如果要执行此操作，则应将index.js包装在BrowserRouter内。

import { BrowserRouter } from "react-router-dom";

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

Answer 2

我已经用BrowserRouter包装了我的应用

您还没有。 BrowserRouter是内部 App返回语句的一部分。这将允许App的任何后代使用withRouter，但是App本身不能。

如果App是组件树中的顶级组件，则它将永远无法使用withRouter。如果您需要App使用withRouter，则需要将BrowserRouter向上移至组件树的上方，从而使App不再位于组件树的顶部。

尽管我应该指出：App实际上并没有使用任何道具，所以您似乎不需要withRouter。您的修复很简单，就像停止在此组件上使用withRouter一样。

RouterContext-错误：不变式失败：您不应在<Router>之外使用<withRouter（App）/>

2 个答案: