如何在我的反應應用程序中導航到不同的路線？

Question

我想為我的作品 web 應用程序創建新的路由，但是他們使用路由的方式並不是我認為的那樣。 本質上，我想添加新路線並能夠像按鈕一樣單擊，這將帶我到我想要 go 到的所需路線。

在我們的應用程序中設置的方式是，您實際上必須在瀏覽器中手動 go 並輸入擴展路徑來訪問該路由，這似乎不是一個好方法。

現在我為我們的庫存系統設置了一條路線。 您可以通過輸入localhost::3000/inventory來訪問此路線。 此主頁上出現了一些按鈕，單擊這些按鈕會呈現該特定組件。 與其那樣做，我寧願設置另一個路徑，比如/additem到庫存路徑，這樣當我單擊“添加項目”按鈕時，它會將我帶到路徑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組件並定義到 go 的預期路徑即可。

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 屬性。

Answer 2

您有 2 個選項，都包含在下面的示例中

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

  }
}