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组件（包含Links）不在Main组件的上下文中（包含路由）但我还没有想出一个解决方案它

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不是第4版中的内容。 <BrowserRouter>正在为您创建history个实例。

脱离上下文的React Links无法导航

1 个答案: