Javascript <；链接>；仅在单击时更改url，而不更改组件和页面

我的应用程序有问题。在我的标题中有Twitter、Youtube和Instgram，如果我点击其中一个，它将显示组件中的页面。例如，如果单击instagram，它将加载instagram组件并将页面更改为instagram。但在我的应用程序中，单击其中一个后，页面不会更改，也不会加载组件，但url会更改。这是我的代码：

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Row, Col, Card, Layout, Spin } from "antd";
import "antd/dist/antd.css";
import "./index.css";
import cubejs from "@cubejs-client/core";
import { QueryRenderer } from "@cubejs-client/react";
import { Line, Bar, Pie } from "react-chartjs-2";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Facebook from "./Facebook";
import Youtube from "./Youtube";
import Instagram from "./Instagram";
import Twitter from "./Twitter";
import moment from "moment";

const AppLayout = ({ children }) => (
  <Layout>
    <Layout.Header>
      <div
        style={{
          float: "left"
        }}
      >
        <h2
          style={{
            color: "#fff",
            margin: 0
          }}
        >
          NARASIDATA
        </h2>
      </div>
      <Router>
        <div
          style={{
            float: "right"
          }}
        >
          <Link to="/facebook/" component={Facebook}>
              <h2
                style={{
                  color: "#fff",
                  margin: 0,
                  paddingLeft: 50
                }}
                >
                  Facebook
              </h2>
          </Link>
        </div>
        <div
          style={{
            float: "right"
          }}
        >
          <Link to="/instagram/">
              <h2
                style={{
                  color: "#fff",
                  margin: 0,
                  paddingLeft: 50
                }}
              >
                Instagram
              </h2>
          </Link>
        </div>
        <div
          style={{
            float: "right"
          }}
        >
          <Link to="/youtube/">
              <h2
                style={{
                  color: "#fff",
                  margin: 0,
                  paddingLeft: 50
                }}
              >
                Youtube
              </h2>
          </Link>
        </div>
        <div
          style={{
            float: "right"
          }}
        >
          <Link to="/twitter/">
              <h2
                style={{
                  color: "#fff",
                  margin: 0,
                  paddingLeft: 50
                }}
              >
                Twitter
              </h2>
          </Link>
        </div>
      </Router>
    </Layout.Header>
    <Layout.Content
      style={{
        padding: "0 25px 25px 25px",
        margin: "25px"
      }}
    >
      {children}
    </Layout.Content>
  </Layout>
);

const Dashboard = ({ children }) => (
  <Row type="flex" justify="space-around" align="top" gutter={24}>
    {children}
  </Row>
);

const DashboardItem = ({ children, title }) => (
  <Col span={24} lg={12}>
    <Card
      title={title}
      style={{
        marginBottom: "24px"
      }}
    >
      {children}
    </Card>
  </Col>
);

const COLORS_SERIES = ["#FF6492", "#141446", "#7A77FF"];

const lineRender = ({ resultSet }) => {
  const data = {
    labels: resultSet.categories().map(c => c.category),
    datasets: resultSet.series().map((s, index) => ({
      label: s.title,
      data: s.series.map(r => r.value),
      borderColor: COLORS_SERIES[index],
      fill: false
    }))
  };
  const options = {};
  return <Line data={data} options={options} />;
};

const API_URL = "http://localhost:4000";
const cubejsApi = cubejs(
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1NjI4MjQ2NjYsImV4cCI6MTU2MjkxMTA2Nn0.h9s4qtiFSia8vHqtyYNwkJDihh-_NcCD57wozOmmz4k",
  {
    apiUrl: API_URL + "/cubejs-api/v1"
  }
);

const renderChart = Component => ({ resultSet, error }) =>
  (resultSet && <Component resultSet={resultSet} />) ||
  (error && error.toString()) || <Spin />;

function App() {
  return (
    <div className="App">
      <AppLayout>
        <Dashboard>
          <DashboardItem>
          <Router>
            <Route exact path="/twitter/" component={Twitter} />
            <Route exact path="/youtube/" component={Youtube} />
            <Route exact path="/instagram/" component={Instagram} />
            <Route exact path="/facebook/" component={Facebook} />
          </Router>
            <QueryRenderer
              query={{
                measures: ["Twitter.retweetcount"],
                timeDimensions: [
                  {
                    dimension: "Twitter.publishat",
                    granularity: "day",
                    dateRange: "This month"
                  }
                ],
                filters: [
                  {
                    dimension: "Twitter.username",
                    operator: "equals",
                    values: ["narasitv"]
                  }
                ]
              }}
              cubejsApi={cubejsApi}
              render={renderChart(lineRender)}
            />
          </DashboardItem>
        </Dashboard>
      </AppLayout>
    </div>
  );
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“antd”导入{Row，Col，Card，Layout，Spin}；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“@cubejs-client/core”导入cubejs；
从“@cubejs-client/react”导入{QueryRenderer}；
从“react-chartjs-2”导入{Line，Bar，Pie}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“/Facebook”导入Facebook；
从“/Youtube”导入Youtube；
从“/Instagram”导入Instagram；
从“/Twitter”导入Twitter；
从“时刻”中导入时刻；
const AppLayout=（{children}）=>(
纳拉西达
脸谱网
一款图片分享应用
Youtube
啁啾
{儿童}
);
const Dashboard=（{children}）=>(
{儿童}
);
常量仪表板项=（{子项，标题}）=>(
{儿童}
);
const COLORS_系列=[“FF6492”、“141446”、“7A77FF”]；
常量lineRender=（{resultSet}）=>{
常数数据={
标签：resultSet.categories（）.map（c=>c.category），
数据集：resultSet.series（）.map（（s，索引）=>({
标签：s.title，
数据：s.series.map（r=>r.value），
borderColor:COLORS_系列[索引]，
填充：假
}))
};
常量选项={}；
返回；
};
常量API_URL=”http://localhost:4000";
常量cubejsApi=cubejs(
“eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.EYJXQIOJE1NJI4MJQ2NJYSIMV4CI6MTU2MJKmTA2N0.h9s4qtiFSia8vHqtyYNwkJDihh-nCD57WOZZ4K”，
{
apiUrl:API_URL+“/cubejs API/v1”
}
);
const renderChart=Component=>（{resultSet，error}）=>
（结果集&）||
（error&&error.toString（））||；
函数App（）{
返回(
);
}
导出默认应用程序；

我的应用程序有什么问题？

---

我是react的新手。

您应该只有一个

，因此请删除

AppLayout

中链接周围的一个，并将整个

应用程序

呈现在

中，如下所示：

<Router>
  <AppLayout>
    <Route />
    <Route />
    // ...
  </AppLayout>
</Router>

从除主页外的所有页面中删除“精确”。仍然相同不起作用为什么您有
链接
标签，周围有
路由器
？我只是跟踪您不了解路由和链接是如何工作的。