score:1
route
in react-router v4 passes three props to the component it renders. one of these is the match
object. it contains information about how the current path was matched.
in your case, you can use match.path
or match.url
to get the location of the page.
something like this:
import react from 'react';
import { render } from 'react-dom';
import { route, hashrouter as router, switch } from 'react-router-dom';
const child = ({ match }) => {
return <p>{match.url}</p>;
};
const app = () => (
<router>
<switch>
<route exact path='/' component={child} />
<route exact path='/test1' component={child} />
<route exact path='/test2' component={child} />
</switch>
</router>
);
render(<app />, document.getelementbyid('root'));
working code is available here: https://codesandbox.io/s/3xj75z41z1
change the route in the preview section on the right to /
or /test1
or /test2
, and you'll see the same path displayed on the page.
hope this helps. cheers! :)
score:0
react router provides location parameter out of box.
you can access it like location.pathname
for eg: if the component is page:
const {hashrouter, route, link} = reactrouterdom;
function page({location}) {
return <p>{location.pathname}</p>;
}
class app extends react.component {
constructor(props) {
super(props);
}
render() {
return (
<hashrouter>
<div>
<route path="/page" component={page} />
<link to='/page'>link to page</link>
</div>
</hashrouter>
);
}
}
reactdom.render(<app />, document.getelementbyid("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- Get page location with React Router 4 and Hash routing
- How to get location pathname with React Router v5 and Hooks in React v16.13.1?
- Using React Router with Switch and can't get the page to render different components when changing routes
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- How to retrieve the parameter after a hash (#) with React Router and useParams hook?
- React Router Link with params not reloading page with new data from componentDidMount and Redux axios data fetching
- 404 custom page not working with useContext and React Router
- Page animations with React Router 4 and React Transition Group 2.3
- React router - click on card and redirect to a new page with content of that card (card details) using useParams and reacthooks
- Problem with react router link and nested routing
- Using React router V6 and when refresh page I get blank page
- React router - click on card and redirect to a new page with content of that card (card details)
- How to get a login button to navigate to a new page once clicked. I have downloaded and used the React router dom
- How to properly set property(if user is logged) from cookie after page opens or F5 in React with router and redux
- Modular Routing with React Router V6 and useRoutes?
- How to create a new page and route programatically in React.js with React Router
- Im using React Router and I want one of my route links with path="/" to be the home page on reload.. How can you do that?
- Can not able to get the location state when opened with "open link in a new tab" in react router
- Handling URL routing with Apache and React Router
- Animate Page Transition with React Router and CSSTransitionGroup
- React js with Laravel (5.1): Removal of the URL hash causes laravel router to kick in and fail
- react router gives a url with a pad sign and a get parameter
- React Router 4: Route a page to 404 page if it doesn't match with my routing URLs
- react routing with parcel and router dom 6.3
- React router with lazy and Suspense always falls back on wildcard route on page refresh
- Why do I get a blank page when I click on links that point to '/' with my react router setup?
- how to send id parameter in url and get the id parameter on the other page with react js?
- React router - Update URL hash without re-rendering page
- How to make react router work with static assets, html5 mode, history API and nested routes?
- Using React Router with CDN and without webpack or browserify
More Query from same tag
- React SetState with destructured variable is providing erroneous results
- Uncaught (in promise) Error: Request failed with status code 400
- REACTJS redirecting + 5 second timeout
- hide array of objects based on route variable
- React - Empty Array When Rendering JSON Data
- Unexpected token errors when running npm test- Config Error?
- \n and other spaces are not being replaced by <br/>
- IntersectionObserver inside useEffect works only once
- HOC in react.js docs
- How to setup Node.js and Express (MERN stack)
- How to update React Google Map after receive data from server
- how to remove whitespace from password validation in react
- Push elements down to fill up remaining vertical space
- Array in React useState: Problem with performance
- Can you use normal CSS with React?
- Deploy war with Spring boot app and react app in Tomcat
- How to use bootstrap or css for never appear scrollbar
- How to create new array with conditionally adding an additional property comparing two arrays
- How to setState to new data in react?
- Nextjs getInitialProps query.id is undefined
- React Fragment not rendering in function
- Where to place an if statement in a component?
- how to resolve "Prop `id` did not match. Server: "react-tabs-30" Client: "react-tabs-0" console issue?
- Is there any way I can use index inside a cy.get('k")?
- Next.js router.query getting undefined on refreshing page, but works if you navigate to it from Link component
- React hook how to change property of array object
- Adding a custom button to DatePicker in material-ui
- Can't load expo app: Something went wrong
- Rid of repeated spans in React.js?
- Import JavaScript file and call functions using webpack, ES6, ReactJS