在ReactJs中进行href重定向后，在页面中加载组件

Question

在reactJs中，我的href链接到新页面。 如何在该页面上加载另一个组件。

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

我想在＃/ action-1上加载newOrder组件。 这是示例组件newOrder。

import React, { Component } from 'react'

export class newOrder extends Component{

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

Answer 1

在反应应用程序中使用“href”会在重新加载页面时违反SPA规则。

我的建议是使用Link组件。

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

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

或者您可以使用withRouter添加一个重定向到/ action-1的函数。

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

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