Click here to Skip to main content
15,441,434 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
This is my code for the parent component:-
<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='/password/forgot' component={<ForgotPassword/> }/> */}
				<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>

Below is the code for the order success Component:-
JavaScript
import React from "react"
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

The error that Iam getting is that the order success component is not being displayed on webpage and neither the console is showing any error.

What I have tried:

I have tried changing the Route type to normal route, then I have tried revisiting the code but still I am unable to see any code error and even the component shows for a few secs on reloading the page but it gets disappeared within a few seconds after the reload is complete.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900