Javascript React路由器dom嵌套不'；不要在儿童部件中工作

为了可视化和清晰的图片，我将首先显示应用程序的屏幕截图

我正在使用GithubAPI获取repo和用户。简单。这就是App.tsx的外观

// App.tsx
import React from "react";
import MainSearchPage from "./Components/MainSearchPage";
import Header from "./Components/Header";
import "./Sass/main.scss";

const App: React.FC = () => {
  return (
    <div className="App">
      <Header />
      <MainSearchPage />
    </div>
  );
};

export default App;

//App.tsx
从“React”导入React；
从“/Components/MainSearchPage”导入MainSearchPage；
从“/Components/Header”导入标题；
导入“/Sass/main.scss”；
常量应用程序：React.FC=（）=>{
返回(
);
};
导出默认应用程序；

这是MainSearchPage组件

// MainSearchPage.tsx
import React, { useContext } from "react";
import { GithubContext } from "../Context/GithubContext";
import searchPc from "../Icons/search-pc.svg";
import SearchResults from "./SearchResults";

const MainSearchPage: React.FC = () => {
  const { isSearched } = useContext(GithubContext);
  return (
    <div>
      {isSearched ? (
        <SearchResults />
      ) : (
        <div className="blank-search-page">
          <div className="blank-search-page__items">
            <img src={searchPc} alt="search-pc" />
            <p>Search results will appear here</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default MainSearchPage;

//SideBarSearchResults.tsx
import React, { useContext } from "react";
import repositoriesSVG from "../Icons/repositories.svg";
import usersSVG from "../Icons/users.svg";
import bookmarkblackSVG from "../Icons/bookmarkblack.svg";
import { Link } from "react-router-dom";
import { GithubContext } from "../Context/GithubContext";
const SideBarSearchResults: React.FC = () => {
  const { repoCount, userCount } = useContext(GithubContext);
  return (
    <div className="side-bar-search-results">
      <Link to="/">
        <div className="side-bar-search-results__repositories">
          <img src={repositoriesSVG} alt="repo" />
          <p className="result-title">Repositories</p>
          <p className="quantity">{repoCount ?? 0}</p>
        </div>
      </Link>
      <Link to="/search-users">
        <div className="side-bar-search-results__users">
          <img src={usersSVG} alt="users" />
          <p className="result-title">Users</p>
          <p className="quantity">{userCount ?? 0}</p>
        </div>
      </Link>
      <div className="side-bar-search-results__bookmarked ">
        <img src={bookmarkblackSVG} alt="bookmarked" />
        <Link to="/repo-details">
          <p className="result-title">Bookmarked</p>
        </Link>
        <p className="quantity">15</p>
      </div>
    </div>
  );
};

export default SideBarSearchResults;

//MainSearchPage.tsx
从“React”导入React，{useContext}；
从“./Context/GithubContext”导入{GithubContext}；
从“./Icons/search-pc.svg”导入searchPc；
从“/SearchResults”导入搜索结果；
const MainSearchPage:React.FC=（）=>{
const{isSearched}=useContext（GithubContext）；
返回(
{我查过了吗(
) : (
搜索结果将显示在此处

)}
);
};
导出默认主搜索页面；

当输入更改时，isSearch变为true，SearchResults正在呈现。这是搜索结果，问题从这里开始

//SearchResults.tsx
import React from "react";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import MainSearchResults from "./MainSearchResults";
import SideBarSearchResults from "./SideBarSearchResults";
import UsersPage from "./UsersPage";

const SearchResults = () => {
  return (
    <div className="search-results">
      <Router>
        <SideBarSearchResults />
        <Switch>
          <Route path="/" component={MainSearchResults} />
          <Route path="/search-users" component={UsersPage} />
        </Switch>
      </Router>
    </div>
  );
};

export default SearchResults;

//SearchResults.tsx
从“React”导入React；
从“react Router dom”导入{Route，BrowserRouter作为路由器，Switch}；
从“/MainSearchResults”导入MainSearchResults；
从“/SideBarSearchResults”导入SideBarSearchResults；
从“/UsersPage”导入UsersPage；
const SearchResults=（）=>{
返回(
);
};
导出默认搜索结果；

所以MainSearchResults基本上是右边的回购结果。我想侧边栏是显而易见的。UsersPage是我单击左侧的用户时应该呈现的组件。但当我点击时什么也没发生。Url更改，仅此而已。控制台中没有错误或任何东西。在我进入“isSearched”状态之前，它是有效的。但我认为这不重要

边栏组件

// MainSearchPage.tsx
import React, { useContext } from "react";
import { GithubContext } from "../Context/GithubContext";
import searchPc from "../Icons/search-pc.svg";
import SearchResults from "./SearchResults";

const MainSearchPage: React.FC = () => {
  const { isSearched } = useContext(GithubContext);
  return (
    <div>
      {isSearched ? (
        <SearchResults />
      ) : (
        <div className="blank-search-page">
          <div className="blank-search-page__items">
            <img src={searchPc} alt="search-pc" />
            <p>Search results will appear here</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default MainSearchPage;

//SideBarSearchResults.tsx
import React, { useContext } from "react";
import repositoriesSVG from "../Icons/repositories.svg";
import usersSVG from "../Icons/users.svg";
import bookmarkblackSVG from "../Icons/bookmarkblack.svg";
import { Link } from "react-router-dom";
import { GithubContext } from "../Context/GithubContext";
const SideBarSearchResults: React.FC = () => {
  const { repoCount, userCount } = useContext(GithubContext);
  return (
    <div className="side-bar-search-results">
      <Link to="/">
        <div className="side-bar-search-results__repositories">
          <img src={repositoriesSVG} alt="repo" />
          <p className="result-title">Repositories</p>
          <p className="quantity">{repoCount ?? 0}</p>
        </div>
      </Link>
      <Link to="/search-users">
        <div className="side-bar-search-results__users">
          <img src={usersSVG} alt="users" />
          <p className="result-title">Users</p>
          <p className="quantity">{userCount ?? 0}</p>
        </div>
      </Link>
      <div className="side-bar-search-results__bookmarked ">
        <img src={bookmarkblackSVG} alt="bookmarked" />
        <Link to="/repo-details">
          <p className="result-title">Bookmarked</p>
        </Link>
        <p className="quantity">15</p>
      </div>
    </div>
  );
};

export default SideBarSearchResults;

//SideBarSearchResults.tsx
从“React”导入React，{useContext}；
从“./Icons/repositories.svg”导入repositoriesSVG；
从“./Icons/users.svg”导入usersSVG；
从“./Icons/bookmarkblack.svg”导入bookmarkblackSVG；
从“react router dom”导入{Link}；
从“./Context/GithubContext”导入{GithubContext}；
const SideBarSearchResults:React.FC=（）=>{
const{repoCount，userCount}=useContext（GithubContext）；
返回(
存储库

{repoCount？？0}
用户
{userCount？？0}
已添加书签
15
);
};
导出默认边栏搜索结果；

问题

开关

组件匹配并呈现第一个匹配的路径，并且“/”是每个路径的前缀。换句话说，它将始终是匹配并首先返回的路径

解决方案 重新排列您的

路线

s，以首先指定更具体的路径，并按路径特定性的降序排列

<Router>
  <SideBarSearchResults />
  <Switch>
    <Route path="/search-users" component={UsersPage} />
    <Route path="/" component={MainSearchResults} />
  </Switch>
</Router>

---

作为Drew Reese anwer答案的补充：

当您使用任何路由匹配组件时，您需要知道它是如何工作的，以便可以使用其他库。 如果

react router

，默认情况下它不会以独占方式呈现组件。也就是说，您的应用程序可能最终会为一条路由匹配两条路径，并呈现第一条路径，因此顺序确实很重要。 例如，如果要路由

'/products'

，则它将同时匹配

/

和

/products

这就是你的情况。如何解决这个问题：

• 使用精确的或
• 重新安排路线，Drew Reese刚才在回答中提到的

备选方案：

如果您不喜欢react路由器的路径匹配怎么办？

---

这里有一个路径匹配有点不同的。Reach路由器对路径进行排序，并渲染最有意义的路径。你可以读到他们的故事。因此，您不需要考虑订单或使用额外的关键字

exact

，因为reach路由器本身使用路径排序**系统对路由器进行优先级排序。

控制台中有任何错误吗？那么问题到底是什么？巢在哪里？或者更确切地说，您指的是什么具体的嵌套（如果有的话）？我看到1个路由器、交换机和路由。问题在于

侧边栏搜索结果中的链接（只是猜测）没有正确路由到
用户页面中的嵌套路由。控制台中没有错误，没有显示任何内容。url更改，仅此而已。没有别的事情发生。对不起，我可能应该把这个添加到问题中。啊，我想我现在明白了，单击侧边栏中的“用户”应该路由到
“/search users”
路径，但这不起作用？你能在你的问题中包含边栏组件吗？@DrewReese我补充道，是的，url会改变。但其他一切都没有改变。如您所见，搜索结果填充用户页面。但是我够不着，天哪。。我简直说不出话来。实际上，我花了一天的时间才改变订单。。。非常感谢您不要重新排序，让
/
路线精确解决问题？比如：@Mateen是的，这也可以解决这个问题，但是（IMO）添加
精确的
道具来强制匹配是不必要的，因为
开关最多只能返回一个匹配，通过正确地排序路线，您可以消除添加额外道具的需要。您是对的。但听从命令是一项开销。“是吗？”马腾在头顶上说，是的，我想有一些在上面