javascript - React 脱离上下文的链接无法导航

Question

设置 react-router我收到错误 Uncaught Error: <Link>s rendered outside of a router context cannot navigate. 。我已经阅读了 github 和此处可以找到的所有内容，但没有找到有效的解决方案。

这是有问题的文件。

Main.js

import React from 'react';
import { BrowserRouter, Route, BrowserHistory } from 'react-router-dom';

import Header from './components/Header/Header';
import Home from './components/Home/Home';
import About from './components/About/About';
import Apply from './components/Apply/Apply';
import Raiding from './components/Raiding/Raiding';
import Resources from './components/Resources/Resources';
import Register from './components/Register/Register';
import Footer from './components/Footer/Footer';

const Main = () => {
    return (
            <div>
                <Header />
                <BrowserRouter history={BrowserHistory}>
                    <main>
                        <Route exact path='/' component={Home} />
                        <Route path='/about' component={About} />
                        <Route path='/apply' component={Apply} />
                        <Route path='/raiding' component={Raiding} />
                        <Route path='/resources' component={Resources} />
                        <Route path='/register' component={Register} />
                    </main>
                </BrowserRouter>
                <Footer />
            </div>
    )
}

export default Main;

标题.js

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

const Header = () => {
    return (
        <header id="site-header">
            <div className="container">
                <img src="http://placehold.it/200x100" alt=""/>

                <nav id="site-nav">
                    <Link className="site-nav-link" to="/about">About</Link>
                    <Link className="site-nav-link" to="/apply">Apply</Link>
                    <Link className="site-nav-link" to="/raiding">Raiding</Link>
                    <Link className="site-nav-link" to="/resources">Resources</Link>
                    <Link className="site-nav-link" to="/register">Register</Link>
                </nav>
            </div>
        </header>
    )
}

export default Header;

index.js

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

import Main from './app/Main';

import 'normalize.css';
import './index.scss';

ReactDOM.render(<Main />, document.querySelector('#root'));

我假设问题在于我的 header 组件(包含链接)脱离了主组件(包含路由)的上下文，但我还没有找到解决方案。

Answer 1

<Link>组件取决于 context.router存在。 context.router由 <BrowserRouter> 设置。你应该渲染你的 <Header> <BrowserRouter> 内部的组件它会按预期工作。

<BrowserRouter>
  <div>
    <Header />
    <main>
      <Route exact path='/' component={Home} />
      <Route path='/about' component={About} />
      <Route path='/apply' component={Apply} />
      <Route path='/raiding' component={Raiding} />
      <Route path='/resources' component={Resources} />
      <Route path='/register' component={Register} />
    </main>
    <Footer />
  </div>
</BrowserRouter>

旁注，但是 BrowserHistory不是 v4 中的东西。 <BrowserRouter>正在创建 history为您提供实例。