ReactJS 标题布局，你不应该在 <Router> 之外使用 <Link>

Question

我正在尝试创建一个布局组件来呈现页眉和页脚。我想在 Header 创建菜单列表，但从 Header.jsx 收到此错误。

Error: You should not use <Link> outside a <Router>

我想知道如何在 Header.jsx 中使用 < Link > 的解决方案

应用程序.jsx

import React from 'react';
import {BrowserRouter as Router,Route,Link,Switch,Redirect,browserHistory} from 'react-router-dom';
    class App extends React.Component {

      render() {
            return (
                <Layout>
                    <Router history={browserHistory}>
                        <div>
                            <Route path="/" component={home}/>
                            <Route path="/docs" component={docs}/>
                        </div>
                    </Router>
                </Layout>
            );
        }


    }

export default App;

布局.jsx

class Layout extends React.Component {
    render() {
        return (
            <div>
                <Header />
                {this.props.children}
                <Footer />
            </div>
        )
    }
}
export default Layout;

标头.jsx

class Header extends React.Component {
      render() {
            return (
             <div>
               <ul>
                 <li><Link to="/">HOME</Link></li>
                 <li><Link to="/docs">DOCS</Link></li>
              </ul>     
            </div>
            );          
      }
 }

export default Header;

Answer 1

您应该将您的LayouttoRouter组件括起来：

class App extends React.Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Layout>
          <div>
            <Route path="/" component={home} />
            <Route path="/docs" component={docs} />
          </div>
        </Layout>
      </Router>
    );
  }
}