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条信息：

它想转到路径pathname
它会发送一个状态，其中包含您的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查询。

关于路径名的说明

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

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

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

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

1 个答案: