如何添加将使用 react-router-dom 渲染组件的路由？

Posted 2023-02-22

【中文标题】如何添加将使用 react-router-dom 渲染组件的路由？

【英文标题】：How to add a route that will render a component using react-router-dom?

【发布时间】：2021-05-01 07:52:36

【问题描述】：

目前，组件SinglePostPage中的代码如下：

        <section>
            <article className="post">
                <h2>post.title</h2>
                <p className="post-content">post.content</p>
                <Link to=`editPost/$post.id` className="button">
                    Edit Post
                </Link>
            </article>
        </section>

EditPostForm 组件包含用于编辑帖子的表单。 当有人点击Link 时，如何添加路由以呈现EditPostForm 组件？

我的App.js如下：

function App() 
  return (
    <Router>
      <Navbar />
      <div className="App">
        <Switch>
          <Route
            exact
            path="/"
            render=() => (
              <React.Fragment>
                <AddPostForm/>
                <PostsList/>
              </React.Fragment>
            )
          />
          <Route exact path="/posts/:postId" component=SinglePostPage />
          <Redirect to="/" />
        </Switch>
      </div>
    </Router>
  )


export default App

【参考方案1】：

我相信您可以向 App.js 添加一条新路由。例如：

function App() 
  return (
    <Router>
      <Navbar />
      <div className="App">
        <Switch>
          <Route
            exact
            path="/"
            render=() => (
              <React.Fragment>
                <AddPostForm/>
                <PostsList/>
              </React.Fragment>
            )
          />
          <Route exact path="/posts/:postId" component=SinglePostPage />
          <Route exact path="/editPost/:id" component=EditPostForm />
          <Redirect to="/" />
        </Switch>
      </div>
    </Router>
  )


export default App;

然后在 SinglePostPage 中，您的链接路径略有错误，应该是：

<Link to=`/editPost/$post.id`>...</Link>

你错过了第一个'/'

【讨论】：

试过了，但<Link> 现在重定向到主页视图

我尝试删除 <Redirect to="/" /> 行，但随后 <Link> 导航到没有任何内容的 URL http://localhost:3000/posts/editPost/1。

@Harish 好的，您可以在代码沙箱上创建一个可重现的版本，以便我可以调试。谢谢

我将尝试创建一个 Codepen。如果您想查看应用程序的其余部分，请参阅本教程：redux.js.org/tutorials/essentials/part-4-using-data

是的！更新链接解决了我的问题。