Question

使用react-router v4 alpha7和dom alpha6（最新版本），我收到以下错误：

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>

react-router v4 alpha7 + dom6不通过BrowserRouter推送上下文

1 个答案: