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

Question

我想在单击按钮后将内容加载到新的新页面上。

单击“创建新”按钮后，我想在页面顶部加载RP GrdgrdreRoup标头。我基本上想在点击“创建新按钮”

时加载新页面

这是我的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')；并删除其上方的链接标签。