Когда я нажимаю на кнопку, данные загружаются ниже предыдущей страницы

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

Когда вы нажимаете кнопку создать новую , пишите this.props.history.push('/form');и удалите тег ссылки над ним.

Answer 2

Путь установлен неправильно.

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

);