超出上下文的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;

Header.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組件（包含鏈接）不在Main組件（包含路由）的上下文中，但我還沒有找到解決方案。

Answer 1

<Link>組件取決於存在的context.router 。 context.router由<BrowserRouter> 。 您應該在<BrowserRouter>內部呈現<Header>組件，它將按預期工作。

<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說明，但是BrowserHistory在v4中不是問題。 <BrowserRouter>正在為您創建一個history實例。