使用 React Router 设置嵌套链接答案

【问题标题】：Set nested links with React Router使用 React Router 设置嵌套链接
【发布时间】：2021-04-09 14:21:58
【问题描述】：

我有一个关于 React 路由器的问题。

现在，我有一个如下所示的网页：

你可以看到页面上有另一个链接叫做“自定义挂钩”。如果我点击它，它将显示如下内容：

我现在想要的是转到上图所示链接的新页面，该页面只会显示“示例”而不是“这是 UseState 函数”文本。

在我的代码中：

使用我的代码，它无法执行我想要的路线。

我该如何解决这个问题？

谢谢

【问题讨论】：

带有示例文本的h1 和div 都不会渲染到路由中，因此它们将始终被渲染。请将代码发布为格式化代码 sn-ps 而不是图像；图片更难阅读，无法搜索。
嗨 Drew，我尝试了从路由中取出 h1 和 div 的方法，但还是一样

标签： reactjs react-router-dom

【解决方案1】：

发生这种情况是因为您似乎误解了 Switch 组件的工作原理。将其视为根据 url 选择要呈现的组件的一种方式。在上面的代码sn -p中，

<Link to="/Homepage"><Button>Back to Homepage</Button></Link>
<h1>This is UseState Function</h1>
<div>Example</div><Link to="/UseStatePage/UseStateFunction">Custom Hooks</Link>

不是 under ，这意味着每当渲染 UseStateWebpage 组件时，总是会渲染带有 'This is UseState Function' 的 Link、h1 和 div。如果您希望根据 URL 选择性地呈现它，有多种方法可以实现它。一种方法如下。

<Router>
   <Switch>
      <Route path="/UseStatePage" exact render={
          ()=>{
                  return(
                            <React.Fragment>
                               <Link to="/Homepage"><Button>Back to Homepage</Button></Link>
                               <h1>This is UseState Function</h1>
                               <div>Example</div><Link to="/UseStatePage/UseStateFunction">Custom Hooks</Link>
                            <React.Fragment>
                        )
              }
      }/>
   </Switch>
   <Switch>
      <Route path="/UseStatePage/UseStateFunction" exact component={UseStateFunction}/>
   <Switch>
<Router>

【讨论】：

【解决方案2】：

带有示例文本的h1 和div 都不会渲染到路由中，因此它们将始终被渲染。将“主页”内容渲染到自己的路由中，如下所示。

function useStateWebPage() {
  return (
    <Router>
      <Link to="/Homepage">Back To Homepage</Link>

      <Switch>
        <Route
          path="/UseStatePage/UseStateFunction"
          component={UseStateFunction}
        />
        <Route path="/Homepage>
          <h1>This is UseState function</h1>
          <div>
            Example
            <Link to="/UseStatePage/UseStateFunction">custom Hooks</Link>
          </div>
        </Route>
      </Switch>
    </Router>
  );
}

【讨论】：