使用动态内容 .map 反应路由器实现

Question

注意：我是反应路由器的新手，所以也许我的问题已经存在于某个地方。

我的网络应用程序从 api（标题、描述、位置等）获取带有地点数据的卡片。有一个卡片预览： How it looks

卡片点击后显示详细信息：

How it looks

这是通过 Material-UI 弹出窗口完成的

然而，这些元素是由地图函数生成的

{props.searchLoading == 3 || props.searchLoading == 1
      ? props.queryData.map((el) => {
          return (
            <Card
              toast={props.toast}
              key={Math.random()}
              idData={el[0].place_id}
              title={el[0].title}
              description={el[0].description}
              price={el[0].price}
              accessibility={el[0].accessibility}
              category={el[0].category}
              placelocation={el[0].placelocation}
              dangerous={el[0].dangerous}
              likeButtonVisible={verify()}
              reportButtonVisible={true}
              liked={el[0].liked == "true" ? true : false}
              saved={el[0].saved == "true" ? true : false}
              numbersLiked={Number(el[0].likednumber)}
              mainImg={el[0].url}
              images={el}
              saveButtonVisible={verify()}
              adminRights={el[0].username == Username()}
            />
          );
        })
      : ""}

我想将链接 localhost:3000/place/:id 添加到每个单独的组件。当我运行以下代码时（react-router-dom 已设置）

{props.searchLoading == 3 || props.searchLoading == 1
          ? props.queryData.map((el) => {
              return (
                <Route
                  path={"place/" + el[0].place_id}
                  component={
                    <Card
                      toast={props.toast}
                      key={Math.random()}
                      idData={el[0].place_id}
                      title={el[0].title}
                      description={el[0].description}
                      price={el[0].price}
                      accessibility={el[0].accessibility}
                      category={el[0].category}
                      placelocation={el[0].placelocation}
                      dangerous={el[0].dangerous}
                      likeButtonVisible={verify()}
                      reportButtonVisible={true}
                      liked={el[0].liked == "true" ? true : false}
                      saved={el[0].saved == "true" ? true : false}
                      numbersLiked={Number(el[0].likednumber)}
                      mainImg={el[0].url}
                      images={el}
                      saveButtonVisible={verify()}
                      adminRights={el[0].username == Username()}
                    />
                  }
                />
              );
            })
          : ""}

在接收到数据时不显示任何内容。我推测原因是因为我不在实际的 URL 上。我想要的是当我单击卡片并打开带有更多信息的material-ui对话框时，反应路由器自动将URL更改为http://localhost:3000/place/:id。这应该是双向的，我希望能够通过地址栏访问这个地方。我可能只是为此需要另一个组件？我该怎么做？

Answer 1

欢迎！

必须在 App.js 中配置路由

App.js

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom';

// Components, Pages
import Home from './Home';
import Place from './Place';                                // Random name for the example

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/home" render={props => <Home {...props} />} />
        <Route path="/place/:id" render={props => <Place {...props} />} />          // !!!
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;

完成此操作后，在您的示例中将 Route 替换为 Link（不要忘记 import {Link} from 'react-router-dom）

您的卡片组件

{props.searchLoading == 3 || props.searchLoading == 1 ? props.queryData.map((el) => {
  return (
    <Link to=`/place/${el[0].place_id}`>
      <Card
        toast={props.toast}
        key={Math.random()}
        idData={el[0].place_id}
        title={el[0].title}
        description={el[0].description}
        price={el[0].price}
        accessibility={el[0].accessibility}
        ...
      />
    </Link>
   )
})}