Load component in a page after href redirection in ReactJs

Question

In reactJs my href links to new page. How can I load another component on that page.

<Dropdown.Item href="#/action-1">New Orders</Dropdown.Item>

And I want to load newOrder component on #/action-1. This is the sample component newOrder.

import React, { Component } from 'react'

export class newOrder extends Component{

        render(){
            return(
                <div>
                   <h1>These are your new orders</h1> 
                </div>
            )
        }
    }

Answer 1

Using "href" inside react application violate SPA rule as it reloads the page.

My suggestion would be to use Link component.

import {Link} from 'react-router-dom';

<Link to='/action-1'>
    <Dropdown.Item>New Orders</Dropdown.Item>
</Link>

Or you can add a function to redirect to /action-1 using withRouter.

import {withRouter} from 'react-router-dom';

<Dropdown.Item onClick={navigateToAction}>New Orders</Dropdown.Item>