reactjs - 如何在 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;

使用过的版本:

• react v16.2.0
• react-router-dom v4.2.2
• react 路由器 v4.2.0

Answer 1

您必须将 react 路由器 HOC 应用到您的组件(文件末尾的 withRouter(Main))然后它会将一些 Prop 传递给您的组件，包括 match 和 位置。

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

编辑:修正了不同路由器 Prop 的实际行为。