javascript - 仅在单击时更改 url，但不更改组件和页面

Question

我的应用程序有问题。在我的标题中，我有 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 新手。

Answer 1

你应该只有一个 <Router />所以删除你在 AppLayout 中链接周围的那个把你的整个包裹起来App在 <Router /> 中呈现像这样:

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

您还应该替换 Router通过 BrowserRouter https://reacttraining.com/react-router/web/api/BrowserRouter