私は次のエラーを取得する反応-ルータをV4のアルファ7およびDOM alpha6（最新バージョン）でBrowserRouter

Question

を通じてコン​​テキストを押していないのV4アルファ7 + dom6-ルータの反応：

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 

誰もがルーターのコンテキストが渡されていない理由のアイデアを持っていますか？これはドキュメントからほぼ真っ直ぐです。

Answer 1

これを行い、リンクは

  <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>