反应路由器V4 alpha7 + dom6不推背景下通过BrowserRouter

问题描述：

随着反应路由器V4 alpha7和DOM alpha6（最新版本），我收到以下错误：反应路由器V4 alpha7 + dom6不推背景下通过BrowserRouter

Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`. 
    in Link (created by MainComponent) 
    in p (created by MainComponent) 
    in div (created by MainComponent) 
    in MainComponent (created by Route) 
    in Route 
    in div 
    in Router (created by BrowserRouter) 
    in BrowserRouter 
    in ApolloProvider

我见过这样类似的问题，但我遵循了他们的建议。

BrowserRouter是围绕路由器组件的*组件

import React from 'react' 
import ReactDOM from 'react-dom' 

import ApolloClient, { createNetworkInterface } from 'apollo-client'; 
import { ApolloProvider } from 'react-apollo'; 
import MainComponent from './components/main.jsx'; 
import AboutComponent from './components/about.jsx'; 
import { BrowserRouter, Route, Link } from 'react-router-dom' 

const client = new ApolloClient({ 
    networkInterface: createNetworkInterface({ uri: 'http://app.local:8001/graphql' }), 
}); 

ReactDOM.render(
    <ApolloProvider client={client}> 
    <BrowserRouter> 
     <div> 
      <Route exactly path="/" component={MainComponent} /> 
      <Route path="/about" component={AboutComponent} /> 
     </div> 
    </BrowserRouter> 
    </ApolloProvider>, 
    document.getElementById('tourapp') 
)

再有就是main.jsx：

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom'; 

class MainComponent extends Component { 
    render() { 
    return <div> 
     <h1>Hello World</h1> 
     <p><Link to="/about">About</Link></p> 
    </div>; 
    } 
} 

export default MainComponent

有没有人有一个想法，为什么在路由器环境不通过？这几乎是直接从文档。

问题是版本不一致，反应路由器从beta.6变化的环境变量名称beta.7。所以它适用于两个版本beta.6 – beberlei

我使用的beta.6和我面临同样的问题，我无法解决它 – Kishorevarma

我使用beta.8它正在使用react-router 8版本，现在解决它 – Kishorevarma

答

为此，该环节都需要路由器标签内

  <div> 
       <nav className="navbar navbar-default"> 
        <div className="container-fluid"> 
         <div className="navbar-header"> 
          <a className="navbar-brand" href="#">WebSiteName</a> 
         </div> 
         <ul className="nav navbar-nav"> 
          <li className="active"><Link to="/">Home</Link></li> 
          <li><Link to='/about'>About</Link></li> 
         </ul> 
        </div> 
       </nav> 

       <Switch> 

        <Route exact path="/" component={Weather}/> 
        <Route path="/about" component={About}/> 

       </Switch> 
      </div> 



     </Router>

反应路由器V4 alpha7 + dom6不推背景下通过BrowserRouter

相关推荐