reactjs - React-router-dom NavLink 不呈现但转到路径

Question

我今天的问题是我正在使用 react-router-dom 并且在 AppRouter.js 中设置了我的所有路径:

import React, { Component } from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import { Landing } from '../components/Landing';
import About from '../components/About';
import { Resume } from '../components/Resume';
import { Phone } from '../components/Phone';
import { Github } from '../components/Github';


export class AppRouter extends Component {
   render() {
    return (
      <BrowserRouter>
        <div>          
              <Switch>
                  <Route exact path='/' Component={Landing}/>
                  <Route path='/about' Component={About} />
                  <Route path='/resume' Component={Resume} />
                  <Route path='/phone' Component={Phone} />
                  <Route path='/github' Component={Github} />
              </Switch>

        </div>
      </BrowserRouter>
    )
  }
}

export default AppRouter

现在，当我在 NavBar 组件中使用 NavLink 时，URL 会更改为路径，但不会将组件呈现到屏幕上。

导航栏组件:

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

export class Navbar extends Component {
  render() {
    return (
      <div>
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <a className="navbar-brand" href="#">"IMAGE PLACE HOLDER" 
   </a>
                <button className="navbar-toggler" type="button" data- 
toggle="collapse" data-target="#navbarNavDropdown" aria- 
controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle 
navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" 
id="navbarNavDropdown">
                    <ul className="navbar-nav">
                    <li className="nav-item active">
                        <NavLink className='nav-link' to='/'>Home</NavLink>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Resume</a>
                    </li>
                    <li className="nav-item">
                        <NavLink className='nav-link' 
to='/about'>About</NavLink>
                    </li>
                    <li className="nav-item dropdown">
                        <a className="nav-link dropdown-toggle" href="#" 
id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria- 
haspopup="true" aria-expanded="false">
                        Contact
                        </a>
                        <div className="dropdown-menu" aria- 
labelledby="navbarDropdownMenuLink">
                        <a className="dropdown-item" href="#">Phone</a>
                        <a className="dropdown-item" href="#">Email</a>
                        <a className="dropdown-item" href="#">Github</a>
                        </div>
                    </li>
                    </ul>
                </div>
            </nav>
      </div>
    )
  }
}

export default Navbar

AppRouter -> Landing -> NavBar & Header

NavBar 不是 AppRouter 的直接子代，而是 Landing 的后代。但是，我确实将其更改为 NavBar 是 AppRouter 的直接子项，但这并没有改变 Landing 组件未在页面初始加载时呈现的事实。

Answer 1

以防万一其他人正在努力解决这个问题。就我而言，该应用程序是 <BrowserRouter> 的包装器在顶层，再一次在较低层(在 NavLinks 旁边)。删除第二个 BrowserRouter 解决了它。