javascript - 在 React 中使用 react-router 4 和 styled-component 时，不应在 Router 外部使用 Route 或 withRouter()

Question

我正在尝试构建我的第一个投资组合网站，但在使用 react-router-dom 4.2.2 和 styled-components 2.2.3 进行路由时遇到了困难。

错误信息:你不应该在 Router 之外使用 Route 或 withRouter()

我也尝试使用 Link 而不是 NavLink，但也出现了错误(你不应该在 Router 之外使用 Link)

请有人帮助我。

navigationBar.js

import React, { Component } from 'react';
import { NavigationContainer, NavItem } from './navigationBar.style';

class NavigationBar extends Component {
  render() {
    return (
      <NavigationContainer>
        <NavItem to="/">Home</NavItem>
        <NavItem to="/projects">Project</NavItem>
      </NavigationContainer>
    );
  }
}

export default NavigationBar;

navigationBar.style.js

import styled from 'styled-components';
import { Flex, Div } from 'theme/grid';
import { NavLink } from 'react-router-dom';

export const NavigationContainer = styled(Flex)`
  position: fixed;
  right: 20px;
  top: 0.5em;
  font-size: 1em;  
`;
export const NavItem = styled(NavLink)`
  position: relative;
  padding-left: 10px;
  cursor: pointer;
`;

Answer 1

确保将主要的 React 渲染代码包装在 Router 中。例如，对于 react-dom，您需要将应用程序包装在浏览器路由器中。如果这是一个 Udacity 项目，这通常是 index.js 文件。

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>

  , document.getElementById('root'));