如何在 react-router-dom v4.2.2 中获取当前路由

Question

我想在基于 meteor 的 React 项目中获取当前路由路径，我想在外部创建登录页面。我该怎么做？这是我的源代码

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;

使用的版本：

反应 v16.2.0
react-router-dom v4.2.2
react-router v4.2.0

Answer 1

你必须将 react router HOC 应用到你的组件（文件末尾的withRouter(Main)）然后它会传递一些道具给你的组件，包括 match 和 location.

match 属性包含 url 和 path 以显示组件路由（path 将为您提供带有参数名称的路由，例如 "user/:id"， url 给你真正的 url 和参数变量，例如 "user/1d6qsqsd56").

location.pathname 将在您调用它的任何地方给出实际的 url（在侧边栏组件中给出“/user/1d6qsqsd56”）。

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

export default withRouter(Main);

编辑：更正了不同路由器道具的实际行为。

Answer 2

您需要像这样访问组件实例的注入属性位置

let currentLocationPath = this.props.location.pathname

更多信息https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

如何在 react-router-dom v4.2.2 中获取当前路由

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

routes

reactjs

react-router

meteor-react