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

【问题标题】：How to add a route that will render a component using react-router-dom?如何添加将使用 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

【问题讨论】：

标签： reactjs redux react-router-dom

【解决方案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
是的！更新链接解决了我的问题。