CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20183

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

Upvotes: 0

Views: 2767

Answers (3)

Ankesh Ramani
Ankesh Ramani

Reputation: 21

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')
);

Upvotes: 0

emil
emil

Reputation: 6364

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);

Upvotes: 3

Shubham Khatri
Shubham Khatri

Reputation: 282130

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')
);

Upvotes: 2

Related Questions