Question

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

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

我想知道解决方案如何在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;

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

Answer 2

您需要在index.js中定义路由

并在index.js中调用路由组件而不是app并在route.js中调用应用程序

Answer 3

基本上，路由器应该包装整个应用程序，以便能够从应用程序中的每个位置提供路由，因此，无论您在最上面使用的组件是什么，都应将其与路由器包装在一起！

更好的是，您可以拥有一个结构如下的 app.jsx 文件，并使用共享组件btw路由的概念：

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router';

render (
  <Router>
    <main>

     // here you can use whatever the shared 
     // component you want to see in all pages
     // for example i want to show my header in all pages
     // so i will use header component here
     <Header />


     <Route exact path="/" component={Home} />
     <Route path="/about" component={About} />
     <Route path="/contact" component={Contact} />
    </main>
  </Router>,
  document.getElementById('app')
);

ReactJS Header Layout，您不应在<router>外使用<link />

3 个答案: