Question

你好由于某种奇怪的原因，我的React UI不会更新。我确定我正确实现了路由器，并且URL实际上更改为路由，但是除非刷新，否则UI不会更新。我添加了Navigation.JS和App.js，请让我知道实际情况。

谢谢

Navigation.js

ggplot(Data_UK7)+
  geom_col(aes(x=Fecha,y=TotalCases))+
  scale_x_date(date_breaks ="1 day")

import React from "react";
import {
  Link,
  BrowserRouter as Router
} from "react-router-dom";

function Navigation(props) {
  return ( <
    Router >
    <
    div className = "Navigation" >
    <
    ul >
    <
    li >
    <
    Link exact to = "/" >
    Home <
    /Link> < /
    li > <
    li >
    <
    Link to = "/clock" > Clock < /Link> < /
    li > <
    li >
    <
    Link to = "/contact" > Contact < /Link> < /
    li > <
    li >
    <
    Link to = "/jeopardy" > Jeopardy < /Link> < /
    li > <
    /ul> < /
    div > <
    /Router>
  );
}

export default Navigation;

App.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

首先，您的Navigation渲染不需要包装在Router标记中。因此，请确保将其删除！

我还鼓励将Routes包裹在Switch语句中，以使它们不会显示多个页面来匹配paths。

因此，将您的App渲染更改为如下所示。

<div className="App">
  <Router history={history}>
    <Navigation />
    <Switch>
      <Route exact path="/clock" component={Clock} />
      <Route exact path="/contact" component={Contact} />
      <Route exact path="/jeopardy" component={Jeopardy} />
      <Route exact path="/" render={(props) => <Welcome {...props} component={Welcome} />} />
    </Switch>
  </Router>
</div>

您的路由器也缺少history道具。

您可以通过在App函数上方添加以下内容来对其进行修复：

import { createBrowserHistory } from 'history'
// other imports go here

const history = createBrowserHistory()

如果不添加history道具，则路由器将不会跟踪浏览器的URL。

除非刷新页面，否则我的React UI不会更新

1 个答案: