React Router不在刷新时呈现单个ID路由

Question

我正在做一个个人项目，并且从两天开始，我就一直遇到反应路由器问题。

我正在获取一个API并尝试使用单个ID呈现路由，因此当我单击卡链接时，一切都工作正常，但是尝试在新选项卡上手动呈现链接时，例如，出现控制台错误

TypeError: Cannot read property 'position_name' of undefined

 | const Articles = ({ location }) => (
  5 |   <ArticleComponent
> 6 |     position_name={location.state.position_name}
  7 |     workplace_name={location.state.workplace_name}

这是我在APP.js文件上的路线

    <Switch>
      <Route exact path="/" component={JobCard} />
      <Route path="/jobs/:_id" component={Articles} />
    </Switch>

以及我提取卡的组件。

  <div key={job._id} className="blog-card">
                    <div className="description">
                      <Link
                        className="link-apply"
                        to={{
                          pathname: `/jobs/${job._id}`,
                          state: job
                        }}
                      >
                        <h5 className="position-name">{job.position_name}</h5>
                        <p className="place">{job.workplace_name}</p>
                        <p className="location-job">{job.location}</p>
                      </Link>
                    </div>

因此，我要实现的目标是当我手动键入链接时能够呈现文章，例如： http：// localhost：3000 / jobs / 5ccc770c6ac54350001f0954

但这只是出于某些原因单击卡时才呈现。

先谢谢您的帮助

Answer 1

但这只是出于某些原因单击卡时才呈现。

当您单击卡中的<Link>时，您可以看到您的请求如下所示：

<Link
  className="link-apply"
  to={{
    pathname: `/jobs/${job._id}`,
    state: job
  }}
>

执行此操作时，您的请求包含2条信息：

1. 它想转到路径pathname
2. 它发送状态，其中包含您的job价值

所以在你的组件中

const Articles = ({ location }) => (
  <ArticleComponent
    position_name={location.state.position_name}
    workplace_name={location.state.workplace_name}
    . . .
  />
);

location对象如下所示：

location = {
  pathname: ‘your_url’,
  state: {
    position_name: ‘your_string’,
    workplace_name: ‘your_string’
    . . .
  }
}

这就是为什么调用location.state.position_name起作用的原因。 但是，当您手动键入URL时，位置将仅如下所示：

location = {
  pathname: ‘your_url’
}

因为，您实际上没有通过任何状态！ 这是不可能实现的，您无法通过键入URL向您的位置道具添加任何内容。 所以，让我们开始工作。

解

您需要另一种获取状态信息的方法。 由于您可以从数据库中检索任何内容，因此应该执行以下操作。 只需更改您的<Article>组件：

Article.js

// You can pass the whole props or destructure the ones you need
// like you did before. In my example, I don’t nee anything so I
// just leave it blank
const Articles = () => {
  // Not the best method but it works everywhere, since I don’t know
  // your whole project structure. Read below for more information.
  const pathname = window.location.pathname.split(‘/‘);
  const job_id = pathname[pathname.length - 1];

  // Make your query here
  // Assume query() is a function that return a job with given id
  // from your database
  const job = query(job_id);
  let position_name;
  let workplace_name;

  // If query was successful
  if (job) {
    position_name = job.position_name;
    workplace_name = job.workplace_name;
  }

  return (
    <ArticleComponent
      position_name={position_name}
      workplace_name={workplace_name}
      . . .
    />
  );
};

因此，您只需要job_id即可检索所需的信息，并允许用户从直接URL查询。

关于路径名的注意

我从window.location检索到job_id ，这是默认的JavaScript URL解析器。 但是，这有点丑陋，更不用说它的可伸缩性了。

根据项目树的结构，如果您的元素已连接到路由器，则可以使用query_string库，如本主题所述 （请注意，某些方法在最新的React版本中不再起作用）。

由于您的用户很可能会出错（例如，输入不存在的id），因此您需要处理查询中的错误（例如，返回空值），或者如果查询不存在，则重定向至404成功。