React路由器未在重定向上加载组件

Question

I am trying to load a component on : http://localhost:3001/api/posts/success

my route tree looks like:

import SuccessMessage from './components/SuccessMessage';


<div>
      <Router>
        <Route component={Navbar} />
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/api/posts/:city" component={ViewPost} />

            <Route exact path="/api/posts/item/:id" component={ItemDetails} />
                    <Route exact path="/api/posts/success" component={SuccessMessage} />
                    <Route exact path="/api/posts/termsofservice" component={termsOfService} />
            <Route exact path="/createpost" component={CreatePost} />

        </Switch>
      </Router>
    </div>

the module being exported

import React from 'react';
import { Jumbotron, Button  } from 'react-bootstrap';

const SuccessMessage = () => {
    return (
        <Jumbotron>
            <h1>Post Successfully Submitted!</h1>
            <p>
                Your post will be reviewed to ensure it does not violate our Terms Of Service, upon approval it will be
                displayed on the main page. Edit or Delete your post in your User Settings.
            </p>
            <p>
                <Button variant="primary" onClick={() => (window.location = `http://localhost:3001/api/posts`)}>
                    >Go To Listings
                </Button>
                {'  '}
                <Button variant="primary" onClick={() => (window.location = `http://localhost:3001/api/posts/termsofservice`)}>
                    Read Our T.O.S
                </Button>
            </p>
        </Jumbotron>
    );
};

export default SuccessMessage;

when I hit the page I only see the navbar..

EDIT: The solution is that when we have a wildroute :city it will block all the other routes, notice

<Route exact path="/api/posts/:city" component={ViewPost} />

Answer 1

EDIT: The solution is that when we have a wildroute :city it will block all the other routes, notice

<Route exact path="/api/posts/:city" component={ViewPost} />

therefore, for wildroutes, ensure you make it distinct

<Route exact path="/api/posts/city/:city" component={ViewPost} />