Question

我正在尝试创建一个博客样式的应用程序，该应用程序的“文章”页面包含将由postId呈现的帖子列表。我已经获得了生成的URL，甚至还有小的<Post />组件都可以呈现，但是当帖子页面呈现后，Articles内容并不会消失，而帖子内容仅呈现在其下方。我该如何解决？

我有 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上放置了一个简化版本的仓库。没有样式或只是问题的HTML版本。

Answer 1

由于您希望文章和帖子页面分开，因此需要将文章路线与文章路线解耦，并在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>
    )
}

通过`：id`反应嵌套路由

1 个答案: