React Router how to know the path

I know this info I could find it online, and Did try. The problem is that I don't know if its for the many different versions, but every page I check it provides (somme times completely) different solutions.

Given this code:

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
/* ...More code here... */
class Footer extends React.Component {
    render () {
        const current_page = location.href.replace('http://localhost:3000', '');
        return (
                <footer>
                <a href="/" className={current_page == '/' ? 'active' : ''}>Game</a>
                <a href="/page" className={current_page == '/page' ? 'active' : ''}>Page</a>
                <p>Current route <strong>{current_page}</strong></p>
            </footer>
        );
    }
}
ReactDOM.render(
    <Router>
        <div>
            <h1>RactJS app</h1>
            <Switch>
                <Route exact path="/" component={ Game } />
                <Route exact path="/page" component={ Page } />
            </Switch>
            <Footer></Footer>
        </div>
    </Router>,
    document.getElementById('root')
);

I could I get current_page in the React way? right now I had to use this so it compiles: /* eslint-disable no-restricted-globals */

As you can guess, I'm pretty new in ReactJS


Since you want to get the location pathname in the Footer component which doesn't receive the router props, you can wrap the Footer component with withRouter and then access the path like this.props.location.pathname

import { withRouter } from 'react-router';
class Footer extends React.Component {
    render () {
        const current_page = this.props.location.pathname;
        return (
                <footer>
                <a href="/" className={current_page == '/' ? 'active' : ''}>Game</a>
                <a href="/page" className={current_page == '/page' ? 'active' : ''}>Page</a>
                <p>Current route <strong>{current_page}</strong></p>
            </footer>
        );
    }
}

const WrappedFooter = withRouter(Footer)
ReactDOM.render(
    <Router>
        <div>
            <h1>RactJS app</h1>
            <Switch>
                <Route exact path="/" component={ Game } />
                <Route exact path="/page" component={ Page } />
            </Switch>
            <WrappedFooter></WrappedFooter>
        </div>
    </Router>,
    document.getElementById('root')
);

React Router v4 - How to get current route?, In the 5.1 release of react-router there is a hook called useLocation, which returns the current location object. This might useful any time you need to know the current URL. In react router 4 the current route is in - this. props. React is a JavaScript library for building user interfaces. We can also extend it to build multi-page applications with the help of React Router. This is a third-party library that enables routing in our React apps. In this tutorial, we are going to cover everything you need to know to get started with React Router.


It seems like you are using react-router v4.

You can get current path from this.props.location.pathname.

So

const current_page = this.props.location.pathname;
...

And instead of using anchor with className on activePath, you can use NavLink from react-router.

import { NavLink } from 'react-router-dom';
...

<NavLink exact to="/" activeClassName="active">Game</NavLink>
<NavLink exact to="/page" activeClassName="active">Page</NavLink>

And wrap your Footer with withRouter. On your footer.js, use follows.

import { withRouter } from 'react-router-dom';
...

export default withRouter(Footer);

The Hitchhiker's Guide to React Router v4: [match, location, history , What happens is that the Router doesn't know the full path to the HelloWorldSection so it routes you up until where it knows the way. The <Route> component is the most important component in React router. It renders some UI if the current location matches the route’s path. Ideally, a <Route> component should have a prop named


import { withRouter } from 'react-router';
class Footer extends React.Component {
    render () {
        const current_page = this.props.location.pathname;
        return (
                <footer>
                <a href="/" className={current_page == '/' ? 'active' : ''}>Game</a>
                <a href="/page" className={current_page == '/page' ? 'active' : ''}>Page</a>
                <p>Current route <strong>{current_page}</strong></p>
            </footer>
        );
    }
}

const WrappedFooter = withRouter(Footer)
ReactDOM.render(
    <Router>
        <div>
            <h1>RactJS app</h1>
            <Switch>
                <Route exact path="/" component={ Game } />
                <Route exact path="/page" component={ Page } />
            </Switch>
            <WrappedFooter></WrappedFooter>
        </div>
    </Router>,
    document.getElementById('root')
);

React Router v5.1, As we introduce new features and APIs, we will let you know at every step ' react-dom' import { BrowserRouter as Router, Route, Switch } from� In the 5.1 release of react-router there is a hook called useLocation, which returns the current location object. This might useful any time you need to know the current URL. import { useLocation } from 'react-router-dom' function HeaderView() { let location = useLocation(); console.log(location.pathname); return <span>Path : {location.pathname}</span> }


React Router v5: The Complete Guide, Since <Route> , <Link> and all the other React Router APIs that we'll be You'll find different code demonstrations of React Router in action. It's now time to add your <Route> tags. These are the links between the components and should be placed inside the <Switch> tags. To tell the <Route> tags which component to load, simply add a path attribute and the name of the component you want to load with component attribute. <Route path='/' component={Home} />.


Understanding The Fundamentals of Routing in React, react-router-dom: a variant of the core library meant to be used for web that knows how to handle any type of URL whereas the HashRouter is used When a path is matched, a React component should be rendered so that� import { default as Router, Route } from 'react-router' const routes = (<Route> <Route path= '*' handler= {RootView} /> </Route>) Router.run (routes, Router.HashLocation, (Root) => { React.render (<Root />, document.getElementById ('all')) })


How do I determine what the active route is? � Issue #277 , Provides access to the last location in react + react-router (v4.x) apps. Useful for handling internal import { BrowserRouter as Router, Route, Link } from 'react- router-dom'; components/Logger , see example. import React� The last path that went through your run callback, which is usually the last path that you rendered with React.render (<Handler />). This can differ from browser history, e.g. after using browser back button it would refer to the next page in browser history.