CODEWITHSUNDEEP
reactjsreact-router
blankface
blankface

Reputation: 6347

Conditionally render 404 route with React Router v4

In my most parent component App I implemented my route like this:

<GetCustomerData />
<Switch>
    <Route path="/dashboard/:customerID" component={Dashboard} />
</Switch>

GetCustomerData gets the customer data as an array of JSON payload (including the customer ID). We navigate to Dashboard component for a specific customer with their corresponding ID.

I want to setup a route which basically throws a 404 component if the customer ID we pass in the URL doesn't exist in the JSON payload in GetCustomerData.

I've seen some tutorials that say to do something like:

 <Route path="*" component={NotFound} />

But this doesn't really check for the customerID param in the url. How do I implement this?

EDIT: In my main component I have Browser route configured in this way:

ReactDOM.render(
    <BrowserRouter>
        <div className="main">
            <App />
        </div>
    </BrowserRouter>
    ,
    document.getElementById('react-app')
);

Upvotes: 3

Views: 2095

Answers (1)

Josh Pittman
Josh Pittman

Reputation: 7324

First setup a 404 route

<Route path="/error" component={NotFound} />

Then store your GetCustomerDatadata in an array in state. It is unclear where the data comes from or how you can manipulate it from your example. If getting the data into the component state is a problem create a separate question.

If you are pulling the id from the URL then use the route parameter in props to get your customer id this.props.match.params.customerID

Once you have the data and the id handy then you can run a check in your render method. 

if (this.state.data.includes(this.props.match.params.customerID)){
 return <whatYouExpectedToReturn/>
}else{
 return <Redirect to='/error'/>;
}

Upvotes: 2

Related Questions