react-router-dom 不会在路由更改时渲染组件

Question

如果我单击导航链接，我可以看到 slug 已更改但组件未呈现。我必须手动刷新页面才能看到组件，而页面应该在路由/slug 更改时自行重新呈现。

应用程序.js

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Me from './components/me';
import Contrib from './components/contrib';
import Projects from './components/projects';
import Contact from './components/contact';

class App extends Component {
  render() {
    return (
      <div className="container">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Me} />
            <Route path="/contrib" component={Contrib} />
            <Route path="/projects" component={Projects} />
            <Route path="/contact" component={Contact} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

头文件.jsx

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

const Header = () => {
    return (
        <div className="container">
            <div id="logo">
                <img src={Earth} alt="placeholdit" className="rounded" />
            </div>
            <nav>
                <BrowserRouter>
                    <ul>
                        <li><NavLink to="/">Home</NavLink></li>
                        <li><NavLink to="/contrib">Contributions</NavLink></li>
                        <li><NavLink to="/projects">Projects</NavLink></li>
                        <li><NavLink to="/contact">Contact</NavLink></li>
                        <li></li>
                    </ul>
                </BrowserRouter>
            </nav>
        </div>
    )
}

如果我删除<BrowserRouter>fromheader.jsx我会收到一条错误消息，告诉我：“您不应该使用<Route>或withRouter()在 a 之外<Router>”。

如果添加<BrowserRouter>内部header.jsx错误消失，但组件不会在路由/slug 更改时呈现。

Answer 1

您需要包装最高阶组件才能使其按预期工作。如果您的应用程序很简单，请将其包装在 ReactDOM.render 方法中。像这样

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