javascript - 如何在我的 React 应用程序中导航到不同的路线？

Question

我想为我的 works web 应用程序创建新的路由，但他们使用路由的方式与我想象的不同。本质上，我想添加新路线并能够点击像按钮一样说，这将带我到我想去的所需路线。

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

现在我为我们的库存系统设置了一条路线。您可以通过键入 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'));

我认为像这样添加另一条路线可以解决问题:

<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>

  )

 }
}

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

Answer 1

在 React-Router 设置中导航的方法是使用 repo 提供的 Link 组件。您为 AddItem 组件创建附加路由的第一个建议是正确的。只需导入 Link 组件并定义预期的路径即可。

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>
  )
 }
}

如果需要，您可以将 Link 样式设置为看起来像一个按钮，因为它接受 className 属性。