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

Question

我想为我的工作 Web 应用程序创建新的路由，但是他们使用路由的方式并不是我认为它们会被使用的方式。本质上，我想添加新路线并能够像按钮一样单击 say，这将带我到我想去的所需路线。

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

现在我为我们的库存系统设置了一条路线。您可以通过键入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 设置中导航的方法是使用Linkrepo 提供的组件。您为AddItem组件创建附加路由的第一个建议是正确的。只需导入Link组件并定义要转到的预期路径。import { Link } from "react-router-domclass InventorySystem extends React.Component{&nbsp;constructor(props){&nbsp; super(props);&nbsp; this.state = {}&nbsp;}&nbsp;render(){&nbsp; return(&nbsp; &nbsp; &nbsp;<Link to="/addItem">Add Item</Link>&nbsp; )&nbsp;}}Link如果需要，您可以将 设置为看起来像按钮，因为它确实接受 className 属性。

Answer 2

您有 2 个选项，均包含在下面的示例中import { Link } from "react-router-dom";class InventorySystem extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {}&nbsp; }&nbsp; goTo(e) {&nbsp; &nbsp; // option 1&nbsp; &nbsp; this.props.history.push('/inventory/additem');&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.goTo.bind(this)}>Add Item</button> // option 1&nbsp; &nbsp; &nbsp; &nbsp; <Link to="/inventory/additem">Add Item</Link> // option 2&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }}