Typescript和React:初始化React中的RouteComponentProps成员

Question

我目前正在学习Typescript和React，目前无法正确访问道具的"匹配"成员。更具体地说，我在初始化从RouteComponentProps接口实现的变量时遇到了问题。

为了简化，我有以下3个文件和相应的组件(路径*(，它们只是用文本呈现一个标题：

索引.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

关于做得更好，我建议使用功能组件而不是类组件。

功能组件还将允许您使用react钩子。您可以从挂钩获得location、history和match：

interface MatchParams {
name: string
}
const App = (): React.ReactElement => 
const history = useHistory()
const location = useLocation()
const match = useRouteMatch<MatchParams>()
return (
<Router>
<div className="App">
<Nav history={history} location={location} match={match} />