javascript - ReactJS Header Layout , You should not use outside a

Question

I'm trying to create a Layout component which would render the Header and Footer. I want to create menu list at Header but I got this error from Header.jsx.

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

I want to know the solution how to use < Link > at Header.jsx

App.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;

Layout.jsx

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

Header.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;

标签： javascriptreactjsreact-router

Answer 1

你应该附上你Layout的Router组件：

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