如何在反应中动态路由

Question

你好，动态路由器有问题这是我的路由器代码

<Router>
    <Navbar />
    <Switch>
        <Route path={`/dashboard/buyList`} component={BuyList} />
        <Route path={`/dashboard/receipt`} component={WarehouseReceipt} />
        <Route path='/dashboard/new' component={NewBuy} exact/>
        <Route path='/dashboard/buyList:id' component={BuyInfo}/>
        <Route path='/dashboard' component={DashboardDetail} exact/>
        <Route component={NotFound} />
    </Switch>
</Router>

我的问题是我必须在哪里设置 buyList:id 并在我的项目中定义它？

Answer 1

这是它在嵌套路由中如何工作的小例子，

function BuyList () {
  return (
    <div>
      <h1>BuyList</h1>
      <ul>
        {buyList.map(({ name, id }) => (
          <li key={id}>
            <Link to={`/buylist/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>

      <hr />

      <Route path={`/buylist/:id`}>
        <Buy />
      </Route>
    </div>
  )
}

带有反应挂钩，

let { path, url } = useRouteMatch();

  <Switch>
    <Route exact path={path}>
      <h3>Please select a buy.</h3>
    </Route>
    <Route path={`${path}/:buyId`}>
      <Buy />
    </Route>
  </Switch>

买入是，

function Buy() {

  let { buyId } = useParams();

  return (
    <div>
      <h3>{buyId}</h3>
    </div>
  );
}

如何在反应中动态路由

how to dynamic route in react

reactjs

react-router

react-router-dom

router