在ReactJs中的href重定向后在页面中加载组件

时间:2019-03-22 03:34:03

标签: javascript reactjs

在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>
            )
        }
    }

2 个答案:

答案 0 :(得分:0)

您将必须在action-1组件内部导入NewOrder组件。这样,当显示action-1组件时,NewOrder也会显示在其中。

在action-1.js文件中。

import NewOrder from './newOrder'
...


class action1 extends React.Component {
... 
  render() {
    return(
      <div>
        ...
        <NewOrder/>
      </div>
    )
  }
}

答案 1 :(得分:0)

在React应用程序中使用“ href”违反了SPA规则,因为它重新加载了页面。

我的建议是使用链接组件。

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>