当我点击按钮时，数据加载到上一页下方

Question

我想在点击按钮后在新页面上加载内容。

点击创建新按钮后，我想在页面顶部加载 RP GrdgrdreRoup Header。基本上我想在点击创建新按钮时加载一个新页面

这是我的 filter.js 文件：

import React from 'react';
import {setFilterText} from '../../actions/Filter';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';

const Filter = (prop) => {
  return(
   <div className="page-container">
    <div className="page-content-wrapper">
        <div className="page-head">
            <div className="container-fluid filter_height">
                <div className="form-inline actions">
                    <h1 className="">Quotations</h1>
                    <div className="create_new">
                        <Link to="/form">
                        <button type="button" className="btn btn-primary btn-sm pull-right">Create New</button>
                        </Link>
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>
)
}
export default connect()(Filter)

这是我的 router.js 文件：

import React from 'react';
import {BrowserRouter, Route, Switch,} from 'react-router-dom';
import Quotation from '../components/QuotationList/Quotation';
import Header from '../components/common/Header';
import CreateQuotation from '../components/CreateQuotation/CreateQuotation';


const AppRouter= ()=>(
 <BrowserRouter>
    <div>
        <Header/>
        <Switch>
            <Route path="/quotation" component={Quotation} exact={true}/>
            <Route path="/form" component={CreateQuotation} exact={true}/>
        </Switch>
    </div>
</BrowserRouter>
);

export default AppRouter

Answer 1

路径设置不正确。

const AppRouter= ()=>(
 <BrowserRouter>
  <div>
    <Header/>
    <Switch>
        <Route path="/quotation" component={Quotation} exact={true}/>
        <Route path="/form" component={CreateQuotation} exact={true}/>
    </Switch>
 </div>
</BrowserRouter>

);

Answer 2

当您点击新建按钮时，写入this.props.history.push('/form')；并删除上面的 Link 标签。

当我点击按钮时，数据加载到上一页下方

When i click on button then data loaded below the previous page

reactjs

react-router-dom