Question

我正在尝试将链接放在我的header.js中，并且由于某种原因错误发生在index.js中，我不知道如何修复它。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Header extends Component {
  render() {
    return (
      <nav className="navbar navbar-light">
        <ul className="nav navbar-nav">
          <li className="nav-item">
            <Link to="/">Home</Link>
          </li>
          <li className="nav-item">
            <Link to="/profile">Profile</Link>
          </li>
          <li className="nav-item">
            <Link to="/blog">Blog</Link>
          </li>
          <li className="nav-item">
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    );
  }
}

export default Header

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

错误讯息：

6 | ReactDOM.render（，document.getElementById（＆＃39; root＆＃39;））;

Answer 1

错误意味着您应该仅在路由器内部的组件中使用Link组件。您应该尝试在更高级别的组件上包装路由器组件（BrowserRouter或HashRouter，具体取决于您使用的是哪个组件）＆＃39;层次结构，以便所有需要使用Link或Route的组件最终都位于组件中的router下面。树。

如果您的App组件中包含Header，Main和Footer组件（例如），则需要访问Link App的所有孩子，然后你可以这样实现：

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Main from '../Main/Main';
import Header from '../Header/Header';
import Header from '../Footer/Footer';

const App = () => (
  <Router>
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  </Router>
);

React training guide有非常好的示例，涵盖react router v4的许多不同用例。

不应在路由器外使用Reactjs错误链接

1 个答案: