Как я могу перейти к другому маршруту в моем приложении реагировать?

Как мне перейти к другому маршруту в моем приложении реагирования?

Я хочу создать новые маршруты для своего веб-приложения работ, но я не думал, что они будут использовать эти маршруты. По сути, я хочу добавить новые маршруты и иметь возможность нажимать, скажем, как кнопка, и это приведет меня к желаемому маршруту, по которому я хочу идти.

Способ, которым он настроен в нашем приложении, заключается в том, что вам фактически нужно вручную зайти в браузер и ввести расширенный путь для доступа к этому маршруту, что не кажется хорошим способом сделать это.

Прямо сейчас у меня есть маршрут, настроенный для нашей системы инвентаря. Вы получите доступ к этому маршруту, введя 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(( {amp}lt;BrowserRouter{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path='/' component={App}/{amp}gt; {amp}lt;Route path='/service' component={ServiceReport} /{amp}gt; {amp}lt;Route exact path='/inventory' component={InventorySystem} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/BrowserRouter{amp}gt;), document.getElementById('appRoot')); 

Я думаю, что добавление еще одного маршрута, как это сделает свое дело:

 {amp}lt;Route exact path='/inventory/additem' component={AddItem} /{amp}gt; 

И я хотел бы получить доступ к этому маршруту из моего файла InventorySystem.js, выполнив что-то вроде этого:

 Class InventorySystem extends React.Component{ constructor(props){ super(props); this.state = {} } goTo(e){ //go to Add Item path } render(){ return( {amp}lt;button onClick={this.goTo.bind(this)}{amp}gt;Add Item{amp}lt;/button{amp}gt; ) } } 

Я не знаю много о React Router, и я также не уверен, что это правильный путь, но любая помощь или предложения будут потрясающими!

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector