如何确定用户在反应路由器中位于哪个编辑或显示页面

对于显示和编辑页面，我有一个组件，但问题是我不知道如何确定选择哪个页面，我该怎么做？在 vue-router 中，我们可以给路由命名，也许在 react-router 中我们可以这样做？

应用程序.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';

import Header from './Header';
import Home from './Home';
import List from './Post/List';
import Single from './Post/Single';

function App() {
    return (
        <div className="App">
            <Header />
            <div className="container">
                <Switch>
                    <Route path="/" component={Home} exact />
                    <Route
                        path="/posts"
                        render={({ match: { path } }) => (
                            <>
                                <Route path={`${path}/`} component={List} exact />
                                <Route path={`${path}/show/:id`} name="show" component={Single} />
                                <Route path={`${path}/edit/:id`} name="edit" component={Single} />
                            </>
                        )}
                    />
                </Switch>
            </div>
        </div>
    );
}

export default App;

单.js

import React from 'react';

class Single extends React.Component {
    constructor(props) {
        super(props);
        this.state = { page: '' };
    }

    render() {
        return (
            <div>{this.state.page}</div>
        );
    }
}

export default Single;