在反应中使用react-router 4和styled-component时，不应在路由器外使用Route或withRouter（）

I'm trying to build my first portfolio website and got stuck in routing using react-router-dom 4.2.2 and styled-components 2.2.3.

我正在尝试建立我的第一个投资组合网站,并使用react-router-dom 4.2.2和styled-components 2.2.3陷入路由。

error message: You should not use Route or withRouter() outside a Router

错误消息:您不应在路由器外使用Route或withRouter()

I also try using Link instead of NavLink but got error too(You should not use Link outside a Router)

我也尝试使用Link而不是NavLink但也遇到错误(你不应该使用路由器外的链接)

Someone help me please.

请有人帮帮我。

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;
`;

2 个解决方案

#1

Well you're using a NavLink outside of the BrowserRouter/HashRouter (whatever you're using)

那么你在BrowserRouter / HashRouter之外使用NavLink(无论你使用什么)

You said it yourself

你自己说的

You should not use Link outside a Router

您不应该使用路由器外的链接

Make sure that you have the structure like this

确保你有这样的结构

// App render or whatever
render() {
  return (
    <BrowserRouter>
       <NavigationBar />
       {`whatever else you doin'`}
    </BrowserRouter>
  );
}

You must always render them inside a Router

您必须始终在路由器中呈现它们

#2

Make sure you wrap the main react render code in the Router. For example, with react-dom you need to wrap the app in Browser-Router. If this is a Udacity project, this is typically the index.js file.

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

````

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

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

  , document.getElementById('root'));

````