如何使用 react-router-dom 将我的按钮路由到另一个页面？答案

【问题标题】：How do I route my button to another page using react-router-dom?如何使用 react-router-dom 将我的按钮路由到另一个页面？
【发布时间】：2020-04-11 00:30:18
【问题描述】：

我的页面上有一个营养成分按钮，单击该按钮可以转到我网站上列出营养成分的另一个页面。我该如何做到这一点？

【问题讨论】：

将按钮组件包装在 react-router-dom 的 Link 组件中

标签： reactjs hyperlink navigation react-router-dom

【解决方案1】：

基本上你需要使用react-router-dom包并使用BrowserRouter和Route和Switch并定义你的路线。
然后你需要用Link 包裹你的按钮并指明路由到哪里。

您的应用组件

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

function App() {
  return (
    <Router>
      <Switch>
          <Route path='/' exact component={NutritionPage}></Route>
          <Route path='/nutrition-facts' component={NutritionFacts}></Route>
      </Switch>
    </Router>
  );
}

export default App;

NutritionPage 组件

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

const NutritionPage = (props) => {
    return (<div>
        <h2>My Nutrition Page</h2>
        <Link to='/nutrition-facts'><button>Nutrition Facts</button></Link>
    </div>)
};

export default NutritionPage;

NutritionFacts 组件

import React from 'react';

const NutritionFacts = (props) => {
    return (<div>Nutrition Facts List Page</div>)
};

export default NutritionFacts;

更多细节和例子read the docs

【讨论】：

非常感谢您快速彻底的回复。
当然，随时..如果有帮助，您可以考虑接受答案..