React Router - 使用按钮链接时呈现的空页面

Question

我有 2 个类组件，当它们分开时两者都可以正常工作，但是当我尝试将它们相互链接时，我收到一个错误，该错误不是实际错误，而是一个空页面。

我的 2 个组件：

1. ComponentA（完全独立工作）
2. NewComponentB（完全独立工作）

这是我的代码：

import {HashRouter as Router, Route, Switch} from 'react-router-dom';
import {Button} from 'react-bootstrap';

export default class ComponentA extends React.props{
   constructor(props){
       super(props);
   }

   handleCreateComponent = () =>{
        this.props.history.push('/api/pages/components/new');
        return(<Redirect to={NewComponentB}  />);
   }


   render(){
      return(
         <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
                <div className="d-block mb-4 mb-md-0">
                    <Switch>
                        <Button id="myButton" onClick={this.handleCreateComponent}>+</Button>
                        <Route path="/api/pages/components/new" component={NewComponentB} />
                    </Switch>
                </div>
          </div>
        );
     }

}

我的问题： 我希望当用户单击 id="myButton" 的按钮时，导航到位于 "/api/pages/components/new" 的另一个页面？

会发生什么： 它导航到链接，但页面是空的。

我收到以下警告：

警告：哈希历史不能推送相同的路径；新条目不会被添加到历史堆栈中

Answer 1

尝试删除 return(<Redirect to={NewComponentB} />); 并导入 NewComponentB

Answer 2

尝试从 react-router-dom 导入 navlink，它会在您的应用程序周围提供声明性、可访问的导航，并且不要忘记导入第二个组件。

    import {HashRouter as Router,NavLink, Route, Switch} from 'react-router-dom'; //add NavLink here 
    import {Button} from 'react-bootstrap';
    import NewComponent2 from 'path' //you have to import the 2nd component here
    
    export default class ComponentA extends React.props{
       constructor(props){
           super(props);
       }
    
       render(){
          return(
             <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
                    <div className="d-block mb-4 mb-md-0">
                        <Switch>
                         <NavLink
                               exact
                               to={/api/pages/components/new}
                             >
                         <Button id="myButton">+</Button>
            </NavLink>
                           
                            <Route path="/api/pages/components/new" >
                              <NewComponent2/>
                            </Route>
                        </Switch>
                    </div>
              </div>
            );
         }