Javascript 断章取义的反应链接可以'；t导航

设置

react router

时，我收到一个错误

Uncaught error:s在路由器上下文之外呈现，无法导航。

。我已经阅读了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;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，BrowserHistory}；
从“./components/Header/Header”导入标题；
从“./components/Home/Home”导入Home；
从“./components/About/About”导入关于；
从“./components/Apply/Apply”导入应用程序；
从“./components/Raiding/Raiding”导入Raiding；
从“./components/Resources/Resources”导入资源；
从“./components/Register/Register”导入寄存器；
从“./components/Footer/Footer”导入页脚；
常量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;

import React，{Component}来自'React'；
从“react router”导入{BrowserRouter，Link}；
常量头=（）=>{
返回(
关于
申请
突袭
资源
登记
)
}
导出默认标题；

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

从“React”导入React；
从“react dom”导入react dom；
从“/app/Main”导入Main；
导入“normalize.css”；
导入“/index.scss”；
ReactDOM.render（，document.querySelector（'#root'）；

我假设问题在于我的头组件（包含链接）与主组件（包含路由）的上下文不符，但我还没有找到解决方案。

组件取决于上下文。路由器存在<代码>上下文。路由器由

设置。您应该在

中呈现

组件，它将按预期工作

---

旁注，但是

BrowserHistory

在v4中不是一个东西。

正在为您创建一个

历史

实例。

当我将main.js改成这样时，我得到了这些坏家伙：/@KrešimirČoko您似乎将React路由器v2/3的代码（我不确定您安装了哪一个）与v4的代码混合在一起。卸载旧的React路由器，并将

import{Link}从'React Router'

更改为

import{Link}从'React Router dom'

。