score:1
If you need Nested routing inside ComponentB
you should add Link
s for those Route
s as well. And use match.url
and match.path
to build the nested Link
s and Route
s.
const ComponentB = ({ match }) => {
return (
<div>
<div>
<ul>
<li><Link to={`${match.url}/c`}>Component C</Link></li>
// more Links
<li><Link to={`${match.url}/css`}>CSS</Link></li>
<li><Link to={`${match.url}/react`}>React</Link></li>
</ul>
</div>
<div>
<Route path={`${match.path}/c`} component={ComponentC} />
// more nested Routes
<Route path={`${match.path}/css`} render={() => { return <h1>CSS</h1> }}/>
<Route path={`${match.path}/react`} render={() => { return <h1>React</h1> }}/>
</div>
</div>
);
}
Nested routing
Components created via Route will automatically be passed the following prop
objects: match
, location
and history
.
Using match
you can implement nested Route
s. The match
object contains the following properties:
params
— (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the pathisExact
— (boolean) true if the entire URL was matched (no trailing characters)path
— (string) The path pattern used to match. Useful for building nestedRoute
surl
— (string) The matched portion of the URL. Useful for building nestedLink
s
Reference
score:2
You can do it in following way:
<Route exact path='/a' component={A} />
<Route path='/b' component={B} />
// Following should be router inside Component B
<Route exact path='/b/abc' component={OtherComponent}
If you want I've prepared few react-router 4 examples. These are hosted here. https://github.com/SandipNirmal/react-router-examples
Source: stackoverflow.com
Related Query
- How to link to Routes inside the component rendered by another Route with React Router
- How to link or route the react semantic UI dropdown component
- How to 1). put a div , 2). render a component without Route inside <Routes> with React Router in v6 React?
- How to access previous index route in nested routes using Link component from react router?
- In React, how do I call a function in one component (which is being rendered with React Router) from another component?
- Link Button to route to the another component is not working in React js
- React Router Switch statement with routes grouped as component inside does not go to Not Found route
- React Router v6 : How to render multiple component inside and outside a div with the same path
- How to add another route to the default react application made with create-react-app?
- React Router Link is not working. The Route changes but the component doesn't get rendered
- How to pass data to another component not in the URL with React Router
- React router 4 - Why is my component only rendered on manually setting the url but not on clicking a Link with same url?
- React share all methods inside a function component that might interact with the state between another function component
- How to pass in a react component into another react component to transclude the first component's content?
- How to set the DefaultRoute to another Route in React Router
- How to override the width of a TextField component with react MUI?
- How to test if a component is rendered with the right props when using react-testing-library?
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- How to test whether a React Component contains another component with jest?
- How to pass the match when using render in Route component from react router (v4)
- How to update the state of a sibling component from another sibling or imported component in REACT
- How can I change the color of a Link in React with Material-UI?
- React anti pattern, defined a component inside the definition of another component
- How to replace a component with another one upon event (button click) in react js
- How to test the state of a functional component in React with Jest (No Enzyme)
- How to ensure a constant inside a component is only calculated once on start in React (Native) with hooks?
- how do I interpolate a Link component in Next-i18next / React i18next that changes position in the text
- Is it possible to access the current route component with React Router
- How to test if a React component contains another component with Tape and Enzyme?
- How to create a link in React component with onClick handler?
More Query from same tag
- How to get file name from download link in firebase storage(Javascript, React)?
- How to fix svg iconmoon not working on codesandbox
- Object showing empty but has values? Undefined when mapping
- React Redux Toolkit: How can I can store my initialState to localStorage using createSlice?
- Trying to return value of selection in ReactJS
- React - Redux Error: Element type is invalid after connect
- javascript conditional with ampersand statements only reading first half
- How to forwardRef selected value from React-Select to react-hook-form
- React/date-fns - error in component 'Objects are not valid as a React child' when using 'addSuffix'
- React & TS - Remove nested array without deleting its objects?
- How do I configure webpack to run bootstrap and sass?
- is there a way to call another action from one action in react redux
- select in react doesn't update the label
- React - Missing data in lifted state
- Import default with alias
- How to call a function if Current position within Polygon in google-,maps-react?
- How can you change the background colour of material-ui/lab/Autocomplete
- react hook form - change style to input
- styled-jsx - is it possible to define css rules without a class name and why dynamically resolved styles don't work?
- Access promise resolve in on click handler in React
- Setting state of array objects
- How to not show tooltip when click the button immediately?
- How to test if a component is rendered with the right props when using react-testing-library?
- map over a array based on prop name, ReactJS
- How can I return back to the page after I click yes in a modal?
- Valid DOM nesting for Provider using React-Redux
- InsertBefore firstChild on event handler using React and Js
- How to resolve Cross-Origin Read Blocking (CORB) blocked problem and fetch api in react
- How to render an Image in react which is coming from Nodejs backend as res.json()?
- Having trouble listing all values of JSON using map in react