0

这是父组件。

<Router>
        <Header />
        {isAuthenticated && <UserOptions user={user} />}

        <Switch>
            <Route exact path="/" component={Home} />
            {/* <Route exact path='/sad' component={<Loader/>}/> */}
            <Route exact path="/product/:id" component= 
 {ProductDetails} />
            <Route exact path="/products" component={Products} />
            <Route exact path="/search" component={Search} />
            <Route path="/products/:keyword" component={Products} />
            <ProtectedRoute exact path="/account" component= 
{Profile}/>
            <ProtectedRoute exact path="/me/update" component= 
{UpdateProfile} />
            <ProtectedRoute
                exact
                path="/password/update"
                component={UpdatePassword}
            />
            <ProtectedRoute exact path="/shipping" component= 
{Shipping} />
            <ProtectedRoute exact path="/order/confirm" component= 
{ConfirmOrder} />
            <Route exact path="/password/forgot" component= 
{ForgotPassword} />
            <Route exact path="/password/reset/:token" component= 
{ResetPassword} />
            <Route exact path="/cart" component={Cart} />

            <Route exact path="/login" component={LoginSignUp} />
            {stripeApiKey && (
                <Elements stripe={loadStripe(stripeApiKey)}>
                    <ProtectedRoute exact path="/process/payment" 
component={Payment} />
                </Elements>
            )}
            <ProtectedRoute exact path="/success" component= 
 {OrderSuccess} />
            <ProtectedRoute exact path="/orders" component={MyOrders}  
   />
        </Switch>
        <ToastContainer position={`bottom-left`} />
        <Footer />
    </Router>

import CheckCircleIcon from "@material-ui/icons/CheckCircle"
import "./OrderSuccess.css"
import Typography from "@material-ui/core/Typography"
import { Link } from "react-router-dom"
const OrderSuccess = () => {
    return (
        <div className="orderSuccess">
            <CheckCircleIcon />
            <Typography>Your Order has been placed successfully</Typography>
            <Link to="/orders/me">View Orders</Link>
        </div>
    )
}

export default OrderSuccess

上面是名为 OrderSuccess 的 react 组件的代码，我面临的问题是该组件在几秒钟内被卸载，即它出现了几秒钟并在一瞬间消失。我已经多次重新访问代码，但仍然无法找到错误。甚至正在显示路线，但组件不存在。我附在输出页面的片段下方。有人可以为我提供解决方案吗？所有答案将不胜感激。 这是输出页面的片段

4

0 回答 0