how to get current route in react-router-dom v4.2.2

Question

I want to get current route path in meteor based react project and I want to create login page externally..how can i do it? this is my source code

client/main.jsx

import React from "react";
import {meteor} from "meteor/meteor";
import {render} from "react-dom";
import {
    BrowserRouter as Router,
    Route
} from "react-router-dom"


import "./main.css";
import "../imports/ui/stylesheets/main.scss";

import Main from "../imports/ui/Main";


Meteor.startup(() => {
    return render((
        <Router>
            <Main/>
        </Router>
    ), document.getElementById("app-root"));
});

ui/main.jsx

import React, {Component} from "react";
import Link, {withRouter} from "react-router-dom"
import PropTypes from "prop-types";


/*@import Templates*/
import Sidebar from "./components/sidebar";

class Main extends Component {

    render() {

        return (
            <div className="container-fluid">
                <Sidebar/>
                //want current location path for here
            </div>
        );
    }
}


export default Main;

Used versions:

• react v16.2.0
• react-router-dom v4.2.2
• react-router v4.2.0

Answer 1

You have to apply the react router HOC to your component (withRouter(Main) at the end of the file) then it'll pass some props to your component, including match and location.

match prop contains url and path to display the component route (path will give you the route with the param name e.g. "user/:id", url give you the real url with the param variable e.g. "user/1d6qsqsd56").

location.pathname will give the actual url wherever you call it (gives "/user/1d6qsqsd56" in your sidebar component).

class Main extends Component {
    render() {
        return (
            <div className="container-fluid">
                <Sidebar/>
                <p> Route path : {this.props.location.pathname} </p>
            </div>
        );
    }
}

export default withRouter(Main);

Edit : Corrected with actual behaviours of different router props.