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