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

【问题标题】：react-router-dom not rendering components on route changereact-router-dom 不在路由更改时渲染组件
【发布时间】：2019-04-28 15:33:26
【问题描述】：

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

App.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>
    );
  }
}

header.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>
    )
}

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

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

【问题讨论】：

最顶层的组件是如何构成的？你在哪里使用Header 和App？
啊，我明白了。你能不能渲染你最顶层的组件，例如document.body 并具有最顶层的组件，例如<BrowserRouter><Header /><Main /><Footer /></BrowserRouter> 而不是？您的 URL 正在更新但您的组件没有更新的原因是因为您使用了多个 BrowserRouter。
我怀疑原因是BrowserRouter，但我不确定。我试试，谢谢提示。
是的，现在可以了。谢谢你。我不得不将它包装在<div> 中，因为它抱怨A <Router> may have only one child element。所以这是在App.js -> <BrowserRouter> <div> <Header /> <Switch> <Route exact path="/" component={Me} /> <Route path="/contrib" component={Contrib} /> <Route path="/projects" component={Projects} /> <Route path="/contact" component={Contact} /> </Switch> </div> </BrowserRouter>中工作的代码
哦，还有一个原因是我避免将所有内容都放在 <div id="root"></div> 中，因为来自 Lighthouse 的审核工具抱怨 HTML 中缺少 <header>, <main> 和 <footer> 标记。

标签： reactjs react-router-v4 react-router-dom

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我遇到了同样的问题。从 header.jsx 中删除并将其放入 index.js 中，如下所示：

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

【讨论】：

【解决方案3】：

注意Route、Switch和Router的顺序。我遵循这个命令，它对我有用。 注意：尝试使用箭头功能

import React from "react";
import { Switch, Route, Router } from "react-router-dom";
// Containers
import { Dashboard, CardPayment } from "../Containers";

const history = createBrowserHistory();

const ReactRouter = () => {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/dashboard" component={Dashboard} exact={true} />
        <Route path="/card-payment" component={CardPayment} exact={true} />
        <Route path="/" component={Dashboard} exact={true} />
      </Switch>
    </Router>
  );
};

export default ReactRouter;

【讨论】：

【解决方案4】：

在我的例子中，使用了路由器，降级“历史”库解决了问题。

app.tsx

<Router history={history}>
  <Switch>
    <Route exact path={`${AppRoute.ALBUMS}/:author/:album`} component={PhotosPage}/>
    <Route exact path={`${AppRoute.ALBUMS}/:id`} component={AlbumsPage}/>
    <Route path={AppRoute.ERROR} component={ErrorPage}/>
    <Route path={AppRoute.ROOT} component={AuthorsPage}/>
  </Switch>
</Router>

我的项目中的版本：

package.json:

...
"history": "4.10.1",
"react-router-dom": "5.2.0",
...

“历史”库最初是版本“5.0.0”

【讨论】：

【解决方案5】：

<Link to ={"/home"}>Home</Link>

就我而言我忘记在“to”参数中添加括号，然后它正在渲染组件

【讨论】：

它将以两种方式工作to="/home" or t0={"/home"}

【解决方案6】：

对于那些无法修复此错误的人

第 1 步：确保用 Router 包裹的高阶组件。在上面的问题中它已经完成了。

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>
    );
  }
}

让我们考虑<Header/> 位于<Route/> 中的任何组件内

第 2 步：如果高阶组件已经用 Router 包裹，也不要包裹 <Header/>，如果您不想在 <Header/> 内单独路由。

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

const Header = () => {
    return (
        <div className="container">
            <div id="logo">
                <img src={Earth} alt="placeholdit" className="rounded" />
            </div>
            <nav>
                <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>
            </nav>
        </div>
    )
}

【讨论】：