Typescript и React: инициализация членов RouteComponentProps в React

Question

В настоящее время я изучаю Typescript и React прямо сейчас, и в настоящее время застрял в возможности правильно получить доступ к элементу 'match' реквизита. Более конкретно, у меня возникают проблемы при инициализации переменных, которые реализованы из интерфейса RouteComponentProps.

Чтобы упростить задачу, у меня есть следующие 3 файла, и соответствующие компоненты (путь *) просто отображают заголовок с текстом:

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>
    );
  }
}

Основная идея c заключается в том, что при нажатии на каждую ссылку компонент Nav обновляет только текст вверху страницы в зависимости от того, на какой странице находится пользователь. Мое рассуждение о том, чтобы поместить штрих-код в нужное место, заключается в том, что это сэкономит время в будущем при добавлении большего количества маршрутов.

Проблема
Моя проблема заключается в том, что мне нужно передать начальные реквизиты в index.tsx, однако я не могу найти ничего о том, как инициализировать реквизиты, которые находятся в интерфейсе RouteComponentProps. Или, если я делаю это неправильно (или что-то еще с кодом), пожалуйста, сообщите мне. Я новичок, когда дело доходит до реакции / машинописи, и я хотел бы в первый раз изучить правильный путь, чтобы не усиливать вредные привычки.

Answer 1

Что касается улучшения, я бы предложил использовать функциональные компоненты вместо компонентов класса.

Функциональные компоненты также позволят вам использовать реагирующие крючки . Вы можете получить 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} />