Question

这是我的代码

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

const Home = () => <div>Home</div>;
const About = () => <div>About</div>;
const NoMatch = () => <div>NoMatch</div>;

const RouteAbout = (
  <Route key={"1"} path={"/About/Photo/Public/:Fuu"} component={About} />
);
const RouteNoMatch = (
  <Route key={"2"} path={"/About/Photo/:Juu"} component={NoMatch} />
);
const RouteAboutNoMatch = [RouteAbout, RouteNoMatch];

function App() {
  return (
    <div>
      <Router>
        <div>
          <Link to="/">Home</Link>
          <Link to="/About/Photo/Public/Fuu">About</Link>
          <Link to="/About/Photo/Juu">NoMatch</Link>

          <Switch>
            <Route exact path="/" component={Home} />
            <Fragment>{RouteAboutNoMatch}</Fragment>
            <Route component={NoMatch} />
          </Switch>
        </div>
      </Router>
    </div>
  );
}

当我单击链接About.About和NoMatch时，两个组件均打开。但是我希望在屏幕上看到About组件。如何解决该问题是什么？

Answer 1

您必须指定准确的路线

d=1
hour_before = 10
col_days = []
for row in df.itertuples(): 
    if row.date.hour == 10 and hour_before != 10 : 
            d+= 1
    hour_before = row.date.hour 
    cols_days.append(d)
df['day'] = col_days

Answer 2

<Switch>仅返回一条第一条匹配路线。

exact返回完全匹配的任意数量的路由。

当您的路线是这样时，

<Route key={"1"} path={"/About/Photo/Public/:Fuu"} component={About} />
<Route key={"2"} path={"/About/Photo/:Juu"} component={NoMatch} />

解释以更好地理解

<Route key={"1"} path={"/base_path/sub_path_1/sub_path_2/sub_path_3"} component={About} />
<Route key={"2"} path={"/base_path/sub_path_1/sub_path_2"} component={NoMatch} />

现在，当您单击About链接时，它将搜索路线，在这种情况下，它以两条路径为/base_path/sub_path_1/sub_path_2的路线结束，您将得到About和{一次{1}}个组件。

因此您需要指定 NoMatch属性以仅获取一个组件。

此外，还有一点要添加exact，因此，对于该路由而言，exact较少的路由都需要添加sub_path属性。

在您的情况下，应将exact属性添加到exact组件路由中，因为它的NoMatch较少。

Demo

为什么在阵列中布线以同时打开两个组件

2 个答案: