上下文無法導航的反應鏈接

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')); 

什麼我假設是，問題在於這樣一個事實，我的頭組件（其中包含鏈接）不在主組件（包含路由）的上下文中，但我還沒有弄清楚解決方案。

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實例。