score:1
Accepted answer
the way to navigate within a react-router setup is by using the link
component provided by the repo. your first suggestion to create an additional route for the additem
component is correct. simply import the link
component and define the expected path to go to.
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>
)
}
}
you can style the link
to look like a button if needed as it does accept a classname property.
score:0
you have 2 options, both included in example below
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>
)
}
}
Source: stackoverflow.com
Related Query
- How do I navigate to a different route in my react application?
- How do I programaticly navigate to a route from an event handler in React Router 4.0?
- How to pass additional props throughout a Route element that has parameters in a Typescript based React Web Application
- How to navigate between different nested stacks in React Navigation 5.x?
- How to Bind different react components with the same react-router route depending on redux state?
- How can I navigate to a nested Route in React Router Dom V6
- How to navigate to different route programmatically in `redux-router5`?
- How to manually navigate to route with React + React-Router-Component
- react router v6 how to navigate to route
- How to add another route to the default react application made with create-react-app?
- React Router: How to render different components with the same route conditionally
- React BrowserRouter - how to programmatically navigate to different routes?
- React.js : How to start a react application on a different port
- How to click a button and navigate to a new route with URL params using React Router 4
- How do I add a post route to my react application
- In React Router how can I route to 2 similar urls with a different param
- How I navigate to the different routes when I am on the certain Route
- How to navigate into different component from nested route in React?
- How to run a different build command for staging environment when publishing a react amplify application
- how to navigate to different page on click of a button in React functional components?
- How can you route to a different BrowserRouter component in React Router 4?
- How do I pass Redux props to a separate component in a different Route with React Router v4?
- How to route React web app to different link from node Js?
- React - How do I start a timer, then navigate a different route, then come back and have the timer still in sync with its original countdown?
- How to make same URL scheme but different route and component in React JS
- How to render component from React Route to a different div than root
- How to set the DefaultRoute to another Route in React Router
- How to disable source maps for React JS Application
- How to deploy a React + NodeJS Express application to AWS?
- How to navigate on path by button click in react router v4?
More Query from same tag
- Test input element click invocation when label is clicked
- document.getElementById() equivalent in React 2020
- What are context and updater arguments in the React library?
- Why should we avoid side-effects in components constructors?
- React Use RouteComponentProps - Type '{}' is missing the following properties from type 'Readonly<RouteComponentProps<{}
- Pass function from parent to children in React.Children.map?
- Call javascript function from ReactJS
- React - what is the proper way to reload after multiple axios requests are done
- Dynamically Select Options From Multiple Select Dropdown With Reactstrap In React js
- What is the main difference between React Query and Redux?
- How to combine custom hooks and selector results?
- how about validation if the login fails
- Confirmation modal connecting to redux store using mapStateToProps gives an ERROR
- React rendering based on boolean in state: ternary not working
- Map Json array inside a Json React
- i18next check for unused translation
- React inline styling
- Basic React form submit refreshes entire page
- Ability to specify existing DynamoDB source when adding GraphQL API
- React function uses outdated state
- How to Bind different react components with the same react-router route depending on redux state?
- Warning: Prop `className` did not match. Switching from light to dark mode using cookies (Nextjs, Mui5)
- How to create an unit test for UncontrolledTooltip from reactstrap that does not handle state management directly?
- Chrome extension ExecuteScript not firing XRM JavaScript
- Switch statement to return result only when item type changes
- Redux-thunk "dispatch is not a function"
- Absolutely positioned Div goes out of the screen when the width of the screen gets small
- React App renders blank page on Github Pages
- Prevent triggering onMouseOut event when hover over children
- Declare font size for html element for various breakpoints in MaterialUI