我想为我的 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 了解不多,我也不确定这是否是正确的方法,但任何帮助或建议都会很棒!
最佳答案
在 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 属性。
关于javascript - 如何在我的 React 应用程序中导航到不同的路线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58457392/