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

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} />