React Router - 项目出现在同一页面上，而不是在另一个页面中打开链接答案

【问题标题】：React Router - Items appear on the same page instead of link opening in another pageReact Router - 项目出现在同一页面上，而不是在另一个页面中打开链接
【发布时间】：2021-08-18 19:51:41
【问题描述】：

我有 2 个类组件，两者都运行良好。

我的 2 个组件：

组件A
NewComponentB（路径：“/api/pages/components/new”）

这是我的代码：

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

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">
                    <Router>
                        <NavLink exact to="/api/pages/components/new">
                            <Button id="addComponent" className="btn btn-dark rounded-circle btn-lg">+</Button>
                            <Route path="/api/pages/components/new" component={NewComponentForm}/>
                        </NavLink>
                    </Router>
                </div>
          </div>
        );
     }


}

我得到了什么：

页面导航到新页面的链接：“/api/pages/components/new”，我在当前所在的同一页面中的当前内容下方显示页面内容。

我想要什么： 我想让按钮/链接导航到上述链接“/api/pages/components/new”的新页面？

（旁白）我试过了，但没用：

 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">
                        <Router>
                            <NavLink exact to="/api/pages/components/new">
                                <Button id="addComponent" className="btn btn-dark rounded-circle btn-lg">+</Button>
                            </NavLink>
                        </Router>
                        <Switch>
                           <Route path="/api/pages/components/new" component={NewComponentForm}/>
                        </Switch>
                    </div>
              </div>
            );
 }

【问题讨论】：

如果你想让一个组件在另一个打开时消失，你的组件应该在路由器中的同一层。您想要的内容显示在当前内容的正下方，因为您的 ComponentB 的路由和路由器是在 ComponentA 内部设置的。

标签： javascript node.js reactjs react-redux react-router

【解决方案1】：

您需要在app.js 的路径下设置路由，因为它应该在此组件加载之前分配给路由。

<Route path="/api/pages/components/new" component={NewComponentForm}/>

您也可以使用useHistory 钩子在点击时重定向（不会创建超链接）

import { useHistory } from "react-router-dom";
....

  let history = useHistory();

  const redirectToForm = () => history.push('/api/pages/components/new');

  return (
       <div className="d-flex ...">
              ...
              <Button className="btn btn-..." onClick={redirectToForm}>+</Button>
              ...
       </div>
    )

【讨论】：