Почему не работает вложенные маршруты в реагирует роутер?

Question

Я пытаюсь использовать вложенные маршруты в реагирующем приложении, но получаю 404 с. Пожалуйста помоги. Прежде всего, я попытался использовать два динамических c вложенных маршрута, и это не сработало. Затем я заменяю первый динамический маршрут c на stati c, но все равно он не работает правильно.

App.jsx ...

import { Home } from './components/Home';
import { About } from './components/About';
import { NotFound } from './components/404';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact>
           <Home />
        </Route>
        <Route path="/about" exact>
          <About />
        </Route>
        <Route component={NotFound} path={"*"} exact />
      </Switch> 
    </BrowserRouter> 
  );
}

About.jsx

import React from 'react';
import { Link, Route, withRouter } from 'react-router-dom';
import Nested from './Nested';
import Switch from 'react-router/Switch';

const About = (props) => {
    return (
        <div>
        <Link to="/">Home</Link>
        <Link to={`${props.match.url}/id`}>Nested</Link>
        <Route path={`${props.match.url}/id`} component={Nested} />
        </div>
    )
}

const AboutWithRouter = withRouter(About)

export { AboutWithRouter as About }

Answer 1

Вместо использования дочерних элементов в Маршруте используйте <Route component>. Он будет отображаться с реквизитами маршрута.

<Route path="/about"  component={About} />   

временные коды и поле

Answer 2

Вам не нужно указывать путь = "*" в Не найденном маршруте. Пропуск пути приведет к тому, что маршрут будет всегда совпадать.

  <Switch>
    <Route path="/" component={Home} />
    <Route path="/about" exact component={About} />
    <Route component={NotFound} />
  </Switch>