Typescript和React：在React中初始化RouteComponentProps成员

Question

我目前正在学习Typescript和React，目前一直无法正确访问道具的“ match”成员。更具体地说，我在初始化从RouteComponentProps接口实现的变量时遇到了麻烦。

为简单起见，我有以下3个文件，而相应的组件（path *）仅使用文本呈现标题：

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('roots')
);

app.tsx

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

import Path1 from './Path1';
import Path2 from './Path2';
import Nav from './Nav'

class App extends React.Component<RouteComponentProps> {
  render(): JSX.Element{
    return (
      <Router>
        <div className="App">
          <Nav history={this.props.history} location={this.props.location} match={this.props.match}/>
          <Switch>
            <Route path="/" exact component={Home} name="Home"/>
            <Route path="/path1" exact component={Path1} name="path1"/>
            <Route path="/path2" exact component={Path2} name="path2"/>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App

Nav.tsx

import React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';

class Nav extends React.Component<RouteComponentProps>{
  render(): JSX.Element {
    return (
      <div className="Nav">
        {this.props.match.path}
        <ul className="NavLinks">
          <Link to="/">
            <li>Home</li>
          </Link>
          <Link to="/Path1">
            <li>Path1</li>
          </Link>
          <Link to="/Path2">
            <li>Path2</li>
          </Link>
        </ul>
      </div>
    );
  }
}

基本思想是，单击每个链接后，导航组件只会根据用户所在的页面来更新页面顶部的文本。我将导航条形码放置在原处的原因是，将来在添加更多路线时可以节省时间。

问题我的问题是我需要在index.tsx中传递初始道具，但是我似乎在如何初始化RouteComponentProps接口中的道具方面找不到任何东西。或者，如果我做错了（或代码中的其他操作），请告诉我。关于反应/打字稿，我是新手，我想第一次学习正确的方法，以免养成不良习惯。

Answer 1

关于做得更好，我建议使用函数语法而不是类。像这样：

const App = ({
  history,
  location,
  match
}: RouteComponentProps): React.ReactElement => (
  <Router>
    <div className="App">
      <Nav history={history} location={location} match={match} />

我不确定您所说的“初始道具”是什么意思。如果您想要道具的默认值，则可以使用标准javascript语法作为默认值：

const App = ({
  history = "default history",
  location = "default location",
  match
}: RouteComponentProps): React.ReactElement => (

如果您的意思是如何传递道具表格索引，则应该能够使用标准语法