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

Question

我正在尝试在http://localhost:3001/api/posts/success

上加载组件

我的路线树看起来像：

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>

要导出的模块

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;

当我点击页面时，我只会看到导航栏。

编辑：解决方案是，当我们有wildroute：city时，它将阻止所有其他路由，请注意

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

Answer 1

编辑：解决方案是，当我们有一个wildroute：city时，它将阻止所有其他路由，注意

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

因此，对于野外路线，请确保使其与众不同

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