score:2
Accepted answer
try nesting the routes under /items
<route
path="/items"
render={() => (
<>
<route path="" component={allitems} exact />
<route path="/add" component={additemmodal} />
<route path="/edit" component={edititemmodal} />
<route path="/:id" component={itemdetail} />
</>
)}
/>
score:0
if you want to have an independent views for itemdetail
and allitems
but at the same time have /items/add
and /items/:id/edit
(took a little liberty with the url, you need and id to edit an item right?) as modals over allitems
so the structure of the routes would be something like this:
allitemsview
(/items)additemmodal
(/items/new)edititemmodal
(/items/:id/edit)
itemdetailview
(/items/:id)
you need a little tweak of tnc andrei response:
<route
path="/items"
render={({ match: {url, isexact}, location: {pathname} }) => {
let pathnamearray = pathname.split("/")
let lastchunk = pathnamearray[pathnamearray.length - 1]
if (isexact || lastchunk === "new" || lastchunk === "edit") {
return (
<>
<route path={`${url}/`} component={competitionsview} />
<switch>
<route path={`${url}/new`} component={competitionformmodal} />
<route path={`${url}/:competitionid/edit`} component={competitionformmodal} />
</switch>
</>
)
}
return (
<>
<route path={`${url}/:competitionid`} component={competitionview} />
</>
)
}}
/>
Source: stackoverflow.com
Related Query
- Prioritise nested route over main route
- Using React.js lazy loading when I navigate to a nested route the main bundle doesn't load
- React-router-v6 nested route only renders main route
- React nested route fails to load on refresh
- REACT: Map over nested array of objects
- React router v4 nested route relative path
- Error: Absolute route path "/" nested under path "/app" is not valid
- React router nested routes - How to redirect when no route is matching
- How to use nested routes to add content to a page without removing the content of the previous route with react-router-v4?
- React Router full page for nested route
- Nested details route with react-router not rendering
- react-router: Nested route component mounts before parent route component?
- react-router - Navigate to parent route from nested router
- Open nested menu in main menu - material-ui (react)
- I need a nested route in react router V5
- Nested index route not rendering in react-router-dom v6
- Implement nested async route fetching in React
- React Router: Route with nested params not hit
- How to pass all parent Props to all nested route children which uses {this.props.children}
- how to fetch a nested resource for every component in React router dom route
- React Router v4 global no match to nested route childs
- how to pass outlet context to nested route in react router v6
- How to loop over nested array in react?
- react app loading asset from incorrect file path when accessed from nested route
- How to access previous index route in nested routes using Link component from react router?
- Nested Route not working in react router dom for my admin dashboard
- Component Missing when Nested inside of Route in React Router v6
- How can I navigate to a nested Route in React Router Dom V6
- Nested route not rendering
- React Route does not work with nested URLs
More Query from same tag
- How to send data from stateless child component to stateless parent component in react?
- post request without a form or a button in React?
- Tic tac toe rutorial : How can I trigger multiple callback functions?
- Exporting component using i18n's useTranslation and redux's connect HOCs
- Unable to access state inside interval
- Access history object inside action creator
- Changing Component React Web
- React Jest test errors when using toHaveBeenNthCalledWith
- radio button in react
- Gatsby fails at develop when cloning git repository
- React table is getting sorted on filter
- MapStateToProps not being called after changing STATE in reducer
- How to change the nav bar color when it reaches the next div
- how to import reducer to store.js from createSlice @reduxjs/toolkit
- React Js axios set state and self not working
- Render HTML tag based on a prop in Typescript
- Filtering away javascript objects into an array when using fetch
- React not doing deep comparing of defaultProps
- How do I make a class component method accessible outside of the component in React and Typescript?
- JavaScript array comparisions and display values from another
- React-virtualized table not rendering as a table
- calling javascript method from react
- React Router v4 - Error: React.Children.only expected to receive a single React element child
- how to loop through two array in react?
- How to detect the scrolling to bottom in react
- Not able to access param in another screen inside componentdidmount()
- How to properly avoid error "Too many re-renders in reactjs"
- useState does not updating value
- Sorting a listints in React Native
- Passing props to component via variable