Javascript React router更改url，但不更改视图

我正在根据路径拉入要显示的组件：

App.js-

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import axios from 'axios';

import './App.css';

import Header from './components/header';
import Home from './components/home';
import Page from './components/page';
import Work from './components/work';

class App extends Component {

    constructor(props){
        super(props);

        this.state = {
            title: "John Doe",
            nav: {}
        };
    }   

    getMainMenu(){
        axios.get('http://admin.sitedata.com/menus/5')
        .then((response) => {
            this.setState({nav:response.data});
        })
        .catch((error) => {
            console.log(error);
        });
    }

    componentDidMount(){
        this.getMainMenu();
        this.triggerMenu = this.triggerMenu.bind(this);
    }   

    triggerMenu(e){
        var menuOverlay = document.getElementById('menuOverlay');

        if(menuOverlay.classList.contains('active')){
            menuOverlay.classList.remove('active');
        } else {
            menuOverlay.classList.add('active');
        }
    }

  render() {
    return (
      <div className="App">

        <Header nav={this.state.nav} triggerMenu={this.triggerMenu} />

        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/work/:slug" component={Work} />
                <Route path="/:slug" component={Page} />
            </Switch>
        </Router>

      </div>
    );
  }
}

export default App;

---

为什么头文件中有路由器？@AndrewLi是的，

围绕着

Header.js

文件中的内容。这是问题中的第二段代码。但确切的原因是什么？有什么意义呢？@AndrewLi，因为没有它就不能工作。您会收到错误，“失败的上下文类型：上下文

路由器

在

链接中标记为必需，但其值为
未定义
”发现问题。我必须把路由器放在
组件周围，而不是组件文件本身。
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';


class Header extends Component {
  render() {      

      if(this.props.nav.items){
          var navData = this.props.nav;
          var pageChange = this.props.pageChange;

          var navItems = navData.items.map(function(navItem){

             return <li key={navItem.id}><Link to={'/'+navItem.object_slug} className={navItem.classes} data-link={navItem.object_slug}>{navItem.title}</Link></li>;

          });
      }

    return (
      <div className="header">

         <Router>
            <section id="siteHeader">

                <div className="menu-overlay overlay" id="menuOverlay" onClick={this.props.triggerMenu}>

                    <ul>
                        {navItems}
                    </ul>

                </div>

                <header>

                    <div id="header" className="container">

                        <a href="/" className="logo"><span>David</span> Powell</a>

                    </div>

                    <span id="menuButton" className="trigger-menu" onClick={this.props.triggerMenu}><i className="fa fa-bars"></i></span>

                </header>
            </section>
        </Router>

      </div>
    );
  }
}

export default Header;