在反应中单击按钮打开新页面答案

【问题标题】：Open new page on click of button in react在反应中单击按钮打开新页面
【发布时间】：2021-02-23 19:45:34
【问题描述】：

当我单击Form 页面中的按钮时，我想在新页面中打开FormStatus。下面是我的代码。

App.js：

import Form from "./components/Form";
import FormStatus from "./components/FormStatus";
import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
        <Route path="/" component={Form}/>
        <Route exact path="/form-status" component={FormStatus}/>
      </div>
    </Router>
  );
}

export default App;

Form.js

import { Link } from "react-router-dom";

const Form = () => {
    return (
        <div>
            <h1>Form Page</h1>
            <Link to="/form-status"><button>click</button></Link>
        </div>
    );
}
export default Form;

FormStatus.js：

import React, {Component} from "react";

class FormStatus extends Component {
    render(){
        return(
            <h1>Form Status Page</h1>
        )
    }
}
export default FormStatus;

当我点击Form 组件上的按钮时，我的网址变为http://localhost:3000/form-status，但我的FormStatus 组件没有打开新页面，而是位于Form 组件下方。

我希望FormStatus 打开一个新页面，并且只显示我的FormStatus 组件的内容，而不是Form 组件的内容

【问题讨论】：

从 react-router-dom 导入 Switch 并用它包装你的路由。这样，只会显示第一场比赛。查看更多信息：reactrouter.com/web/api/Switch
@pratteekshaurya 你试过<Link to="/form-status" target="_blank"><button>click</button></Link> 吗？
@MariFaleiros 新页面打开，但我仍然可以在这个新页面上看到 Form 和 FormStatus 的内容
@usafder 我仍然可以在新页面中看到 Form 和 FormStatus 的内容
@pratteekshaurya 然后尝试在您的第一条路线中输入“精确”

标签： reactjs react-router react-router-dom

【解决方案1】：

好吧，要完成这项工作，您需要更改当前代码中的两件事。

使用react-router-dom 中的Switch 并将您的路线包装在其中。
让您的主页 (/) 路由 exact 而不是 /form-status 路由，因为 /form-status 路由还包括前导斜杠 (/)。因此，由于它们都将匹配预期的路线，因此会将它们一起渲染。

所以你的代码在App.js中应该是这样的：

import React from "react";
import Form from "./components/Form";
import FormStatus from "./components/FormStatus";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Switch>
        <div className="App">
          <Route exact path="/" component={Form} />
          <Route path="/form-status" component={FormStatus} />
        </div>
      </Switch>
    </Router>
  );
}

工作演示：

【讨论】：