具有动态 ID 的基本 React Route 不呈现组件答案

【问题标题】：Basic React Route with dynamic ID not rendering component具有动态 ID 的基本 React Route 不呈现组件
【发布时间】：2020-08-31 06:59:43
【问题描述】：

我试图弄清楚为什么每当访问/sub/:_id 的路由路径（例如/sub/5f1c54257ceb10816a13d999）时组件SubPage 没有呈现。这是我第一次使用 react 路由。 :_id 部分应该可以动态接受来自 URL 的查询参数，所以我看不出为什么这不起作用。

我可以获取/subs 页面来获取API 并呈现页面上的每个子页面，但不是每个单独的子页面。

App.js底部附近路由如下：<Route path={"/sub/:_id"} component={SubPage} />

感谢您在此提供的任何帮助。为了方便我做了一个stackblitz，或者你可以看下面的相关代码：

还有 subPage.js：

import React from 'react'

export class SubPage extends React.Component {
    render() {
        return (
            <div className="sub-details-individual">
                <h1 class="std-intro">Viewing a Single Subscriber</h1>
                <div className="sub-specs">
                    <div className="sub-specs-inner">
                        id: {this.props.params._id}
                    </div>
                </div>
            </div>
        )
    }
}

和 App.js：

import React, {Component} from "react";
import {navLinks} from "./components/nav-links";
import Root from "./components/Root";
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import {SubPage} from "./components/subPage";
import ShowSubs from "./components/show-subs";

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      navLinks: navLinks,
      intro: "hello world",
      url: "someurl"
    }
  }

  updateURL = (newUrl) => {
    this.setState({
      url: newUrl
    })
  }

  render() {
    return (
      <Router>
        <Root navLinks={this.state.navLinks} intro={this.state.intro}></Root>

        <Switch>
          <Route path="/subs">
            <p>subs page</p>
            {/*this.updateURL('/subs') fails presumably because it causes the rerender infinitely - but how to solve?*/}
            <ShowSubs />
          </Route>
          <Route path="/">
            <p>homepage</p>
          </Route>
          <Route path={"/sub/:_id"} component={SubPage} />
        </Switch>
      
        <p>the url: {this.state.url}</p>
      </Router>
    );
  } 
}

【问题讨论】：

标签： reactjs

【解决方案1】：

两件事：

this.props.params._id 将崩溃，因为您在 params 之前缺少 match

this.props.match.params._id

很少有 exact 属性丢失，尤其是在 subs 路径中：

<Route exact path="/subs">

注意：exact 属性在 / 路由中也很有用。

【讨论】：