Javascript 如何在react应用程序中导航到不同的路径？

我想为我的works web应用程序创建新的路由，但它们使用路由的方式与我认为的不同。基本上，我想添加新的路线，并能够像按钮一样点击say，这将带我到我想要去的理想路线

import { Link } from "react-router-dom

class InventorySystem extends React.Component{
 constructor(props){
  super(props);
  this.state = {}
 }

 render(){
  return(
     <Link to="/addItem">Add Item</Link>
  )
 }
}

在我们的应用程序中设置该路径的方式是，实际上您必须手动进入浏览器并键入扩展路径才能访问该路径，这似乎不是一种好的方式

现在我已经为我们的库存系统设置了一条路线。您可以通过键入localhost:：3000/inventory来访问此路由。此主页上出现了一些按钮，单击这些按钮可呈现特定组件。与其这样做，我宁愿设置另一条路径，如/additem到清单路径，这样当我单击Add Item按钮时，它将带我到路径localhost:：3000/inventory/additem并呈现该组件

这是我们的index.js文件的外观，仅供参考

import "babel-polyfill";
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import ServiceReport from './imports/ServiceReportUI/ServiceReport'
import './StyleSheets/ServiceReport.css';
import InventorySystem from './imports/InventorySystem/InventorySystem.js';
import AddNewItemBtn from "./imports/InventorySystem/AddNewItemBtn";
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom' 

ReactDOM.render((
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={App}/>
            <Route path='/service' component={ServiceReport} />
            <Route exact path='/inventory' component={InventorySystem} />
        </Switch>
    </BrowserRouter>), document.getElementById('appRoot'));

导入“babel polyfill”；
导入“核心js/es6/map”；
导入“core js/es6/set”；
导入“core js/fn/array/find”；
导入“core js/fn/array/includes”；
导入“core js/fn/number/is nan”；
从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./imports/ServiceReportUI/ServiceReport”导入ServiceReport
导入“./StyleSheets/ServiceReport.css”；
从“./imports/InventorySystem/InventorySystem.js”导入InventorySystem；
从“/imports/InventorySystem/AddNewItemBtn”导入AddNewItemBtn；
从“react router dom”导入{BrowserRouter，Route，Link，Switch}
ReactDOM.render((
)，document.getElementById（'appRoot'）；

我认为，添加另一条这样的路线就可以了：

<Route exact path='/inventory/additem' component={AddItem} />

我可以通过以下操作从InventorySystem.js文件中访问该路由：

Class InventorySystem extends React.Component{
 constructor(props){
  super(props);
  this.state = {}
 }

 goTo(e){
  //go to Add Item path
 }

 render(){
  return(
  <button onClick={this.goTo.bind(this)}>Add Item</button>

  )

 }
}

Class InventorySystem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}
}
后藤（东）{
//转到添加项目路径
}
render（）{
返回(
添加项
)
}
}

---

我对React Router了解不多，我也不确定这是否是正确的方法，但任何帮助或建议都会很棒

在React路由器设置中导航的方法是使用repo提供的

链接
组件。您关于为
AddItem
组件创建附加路由的第一个建议是正确的。只需导入
链接
组件并定义预期的路径即可

import { Link } from "react-router-dom

class InventorySystem extends React.Component{
 constructor(props){
  super(props);
  this.state = {}
 }

 render(){
  return(
     <Link to="/addItem">Add Item</Link>
  )
 }
}

从“反应路由器dom”导入{Link}
类InventorySystem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}
}
render（）{
返回(
添加项
)
}
}

如果需要，您可以将
链接设置为按钮样式，因为它接受className属性。
您有两个选项，这两个选项都包含在下面的示例中

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

class InventorySystem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  goTo(e) {
    // option 1
    this.props.history.push('/inventory/additem');
  }

  render() {
    return (
      <div>
        <button onClick={this.goTo.bind(this)}>Add Item</button> // option 1
        <Link to="/inventory/additem">Add Item</Link> // option 2
      </div>
    )

  }
}

从“react router dom”导入{Link}；
类InventorySystem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}
}
后藤（东）{
//选择1
this.props.history.push（'/inventory/additem'）；
}
render（）{
返回(
添加项目//选项1
添加项目//选项2
)
}
}
Ok，这似乎很简单。是否可以像这样将链接组件包装在按钮标签中？添加项目，或者这不起作用？@Michael yup你可以，反之亦然。