如何使用 React Router 在 React.js 中以编程方式创建新页面和路由答案

【问题标题】：How to create a new page and route programatically in React.js with React Router如何使用 React Router 在 React.js 中以编程方式创建新页面和路由
【发布时间】：2022-01-15 09:49:07
【问题描述】：

我正在用 React.js 和 React-router 构建一个博客网站。我有一个“blog.js”文件，它呈现了页面看起来像这样的博客的所有标题：

博客.js

    function Blog() {
    
    
      return (
        <div>
          <Header />
          <div className="blog-page-title">
          <h1>Blog</h1>
          </div>
          <div className="blog">
            <Articles title="Title" text="lorem ipsum dolor amet" />
            <Articles title="Title" text="lorem ipsum dolor amet" />
            <Articles title="Title" text="lorem ipsum dolor amet" />
            <Articles title="Title" text="lorem ipsum dolor amet" />
            <Articles title="Title" text="lorem ipsum dolor amet" />
            <Articles title="Title" text="lorem ipsum dolor amet" />
            <Articles title="Title" text="lorem ipsum dolor amet" />
            <Articles title="Title" text="lorem ipsum dolor amet" />
      
          </div>
          <Footer />
        </div>
      );
    }

export default Blog;

当我点击标题时，它应该路由到相应的文章。但是我是否必须为每篇文章手动创建一个新的 Route 和一个新的 js 文件才能实现这一点？例如，当 blog.js 中有一个新的 Articles 组件时，我是否可以这样做，它会自动创建一个新的路由和一个 js 文件？

【问题讨论】：

为每个博客分配一个唯一的博客 ID，您的路由应该类似于 /blog/:blogId，并且您的后端应该正确返回该 blogId 的页面。

标签： javascript reactjs react-router

【解决方案1】：

使用api根据选择的blogId返回博客文章，然后使用react router中的Link，将Link的'to'属性设置为您为博客创建的相应页面，并填写您得到的响应从 api。您可以参考此文档进行路由： https://v5.reactrouter.com/web/api/Link

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

如果你想为每篇文章创建一个新的特定页面，有他自己的 url，你可以使用 useParam 钩子。

在您的 app.js 中，您创建一个带有 slug 的路由，用于标识您的博客文章。

<Route path="/blogs/:blogId  component={<Blog />}/>

然后使用上面文章中 Sharvan 所说的 Link 标签访问它。

blogs.map( blog => <Link to=`/blogs/${blog.id}` /> )

然后您可以访问博客组件中的 slug，这样您就可以获取相应的文章。

const  { blogId } = useParams()
axios.get(`whatever/${blogId}`)

如果你不关心 url，你可以只创建一个以 blogpost 作为 props 的博客组件

【讨论】：