Как использовать динамический маршрут в React Router 5

Объявите маршруты, используйте exact для соответствия точному пути, поскольку поиск маршрута осуществляется сверху вниз. Я считаю, что для динамического маршрута нам нужно использовать рендеринг и передавать реквизиты вручную.

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from 'react-router-dom'
function Content() {
    return (
        <Router>
            <Switch>
                <Route exact path="/about">
                    <About />
                </Route>
                <Route exact path="/">
                    <Home />
                </Route>
                <Route path='/book/:id' render={(props) => {
                    return ( <BookDetail {...props } /> )
                }} />
                <Route>
                    <NotFound />
                </Route>
            </Switch>
        </Router>
    )
}

Чтобы инициировать запрос маршрута, используйте ловушку useHistory. Обратите внимание, что нам нужно объявить переменную, а не использовать useHistory().push напрямую

import { useHistory } from 'react-router-dom'
const history = useHistory()
<a onClick={() => {
    history.push(`/book/${uuid}`)
}} >

Чтобы получить параметры, используйте match

export default function BookDetail(props) {
    const [ state, setState ] = useState({
        book: null
    })
    const { match } = props
   // match.params.id
}