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成功。