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

因此，對於wildroutes，確保你讓它與眾不同

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