根路由下的渲染组件未按预期工作答案

【问题标题】：Render components under root route not working as expected根路由下的渲染组件未按预期工作
【发布时间】：2021-03-01 19:01:57
【问题描述】：

我有一个路由路径 / 渲染 Home 组件

Home 组件包含一个列表。每个项目都应该渲染一个路由/:id

这么多路径将是www.example/:id

我会在主页内容下呈现列表内容。

我的问题是，每次我单击列表项时，列表都会消失，并且什么也没有呈现。

function Home() {
  return (
    <div>
      <h1>Topics</h1>
      <ul>
        {topics.map(({ name, id }) => (
          <li key={id}>
            <Link to={`/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>

      <hr />

      <Route path={`/:topicId`} component={Topic} />
    </div>
  );
}

function Topic() {
  return <div>TOPIC</div>;
}

class App extends React.Component {
  render() {
    return (
      <Router>
        <Route exact path="/" component={Home} />
      </Router>
    );
  }
}

export default App;

这是example

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

你应该删除确切的，像这样：

<Router>     
      <Route path="/" component={Home} />
      <Route path="/:topicId" component={Topic} />
</Router>

现在您的主页和主题将出现

【讨论】：

查看我在@Dheeraj 回复下的评论
谢谢你的工作（我接受了其他回复，因为回复时间顺序）你也在工作。

【解决方案2】：

对于这种类似的路线。我们将处理确切的道具。无需重新排列路线。

<Switch>
      <Route exact path="/" component={Home} />
      <Route path="/:topicId" component={Topic} />
<Switch>

更多详情可以关注https://reactrouter.com/web/api/Route/exact-bool

【讨论】：

谢谢，但是当我点击链接时，这将消失 Home 组件，这不是我想要的。我需要保留它并在链接列表下显示链接内容
@infodev 所以你可以删除确切的，你会得到你需要的东西
嵌套路由可以关注reacttraining.com/blog/react-router-v6-pre/#introducing-routes 会帮到你