时间戳

首页 > 解决方案 > 通过 `:id` 反应嵌套路由

reactjs - 通过 `:id` 反应嵌套路由

问题描述

我正在尝试创建一个带有“文章”页面的博客风格应用程序，该页面具有将呈现的帖子列表postId。我已经得到了要生成的 url，甚至是<Post />要渲染的小组件，但是当一个帖子页面呈现时，文章内容并没有消失，帖子内容只是呈现在它下面。我该如何解决？

我有 App.js：

    <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route exact path="/articles">
            <Articles />
          </Route>
        </Switch>

Articles.js：

import React from 'react';
import { 
    Link, 
    useRouteMatch, 
    Switch, 
    Route,
} from 'react-router-dom';
import Post from '../Components/Post';
import Banner from './Banner';


const Articles = () => {
    let match = useRouteMatch();
    return (
        <div className='Articles'>
            <Banner title='Articles'/>
            <h3>Please select a topic.</h3>
            <ul>
                <li>
                <Link to={`${match.url}/geojsons`}>Geojsons</Link>
                </li>
                <li>
                <Link to={`${match.url}/props-v-state`}>
                    Props v. State
                </Link>
                </li>
            </ul>

            <Switch>
                <Route path={`${match.url}/:postId`}>
                    <Post />
                </Route>
            </Switch>
        </div>
    )
}

export default Articles;

Post.js：

function Post() {
    let { postId } = useParams();
    return <h3>POST - Requested topic ID: {postId}</h3>;
  }

export default Post;

问题页面截图： 带有帖子内容的文章页面

此屏幕截图显示您单击文章链接后的页面。Post内容是我在红色虚线框中的内容，它上面的所有内容都应该只是文章页面的一部分。

我知道这只是几个文件，但为了更容易弄乱我在github上放了一个简化版本的 repo 。没有样式或任何只是问题的 html 版本。

标签： reactjsreact-router-dom

解决方案

由于您希望文章和帖子页面是分开的，因此您需要将您的帖子路由与文章路由分离，并将其呈现在 App.js 而不是 Articles.js 中

  <Switch>
      <Route exact path="/">
        <Home />
      </Route> 
      <Route path="/articles/:postId">
            <Post />
      </Route>
      <Route exact path="/articles">
        <Articles />
      </Route>

   </Switch>

在 Article.js 中

const Articles = () => {
    let match = useRouteMatch();
    return (
        <div className='Articles'>
            <Banner title='Articles'/>
            <h3>Please select a topic.</h3>
            <ul>
                <li>
                <Link to={`${match.url}/geojsons`}>Geojsons</Link>
                </li>
                <li>
                <Link to={`${match.url}/props-v-state`}>
                    Props v. State
                </Link>
                </li>
            </ul>

        </div>
    )
}

推荐阅读