Привет. Вопрос по react router. Есть такой компонент import React,

{ Component } from 'react';
import './App.css';
import { Switch, NavLink, Route, withRouter } from 'react-router-dom';
import Card from './components/Card';

class App extends Component<any, any> {
render() {
return <>
<div className="app-container">
<div>App</div>
<Switch>
<Route path={'/card'} exact>
<Card/>
</Route>
<Route path={'/'} exact>
<NavLink to={'/card'}>card</NavLink>
</Route>
</Switch>
</div>
</>
}
}

export default withRouter(App);

и такой компонент Card
import { Component } from 'react';
import './styles.scss';
import { Route, Switch, NavLink, withRouter } from 'react-router-dom';
import { About } from '../About';


class Card extends Component<any, any> {
constructor(props: any) {
super(props);
}

render() {
return <>
<Switch>
<Route path={'/about'} exact>
<div>!!!!!!!!!!!!</div>
<About/>
</Route>
<Route path={'/card'} exact>
<div>Card</div>
<NavLink to={'/about'}>About</NavLink>
</Route>
</Switch>
</>
}
}

export default withRouter(Card);

проблема в том что не отрабывает переход по роуту /about, ничего не отрисовывается на этом роуте.

Как это пофиксить? точнее "как организовать вложенные роуты"

Попробуй в App.js обернуть роуты в BrowserRouter

Вместо Switch

попробовал, нет эффекта

В Card добавь импорт useRouteMatch

не подходит, нужно чтобы компонент остался классовым