React-Router-Dom v4.2.2获取当前路由及Meteor React外置登录页实现

刚好对这个版本的react-router-dom和Meteor React项目配置门儿清，给你一步步拆解解决：

因为你用的是React 16.2.0（还没推出Hooks），所以只能用类组件+高阶组件的方式，给你两种最常用的方法：

方法1：使用withRouter高阶组件 #

这是v4版本里最通用的方式，它会把路由相关的match、location、history三个props注入到你的组件中，通过location.pathname就能拿到当前路由路径：

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

class MyComponent extends React.Component {
  componentDidMount() {
    // 打印当前路由
    console.log('当前路由路径:', this.props.location.pathname);
  }

  render() {
    return (
      <div>
        当前访问路径：{this.props.location.pathname}
      </div>
    );
  }
}

// 用withRouter包裹组件后才能拿到路由props
export default withRouter(MyComponent);

方法2：通过Route的render/children props直接获取 #

如果你的组件本身是通过<Route>渲染的，可以直接在render回调里拿到路由props，无需额外包裹：

import React from 'react';
import { Route } from 'react-router-dom';
import MyComponent from './MyComponent';

function App() {
  return (
    <Route 
      path="/your-path" 
      render={(props) => {
        // 这里直接拿到location
        console.log('当前路由:', props.location.pathname);
        return <MyComponent {...props} />;
      }} 
    />
  );
}

结合你给出的版本（React 16.2.0、react-router-dom v4.2.2）和文件路径（client/main.jsx、ui/main.jsx），思路是：在外层路由判断用户登录状态，未登录时只渲染独立登录页（不加载主应用布局），登录后渲染主内容，同时保留路由跳转的逻辑。

步骤1：配置入口文件client/main.jsx #

这个文件是Meteor React项目的入口，负责挂载React应用并包裹路由容器：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Main from '../ui/main.jsx';

// Meteor的startup方法确保DOM加载完成后再挂载组件
Meteor.startup(() => {
  ReactDOM.render(
    <BrowserRouter>
      <Main />
    </BrowserRouter>,
    document.getElementById('react-root')
  );
});

步骤2：在ui/main.jsx实现路由鉴权和外置登录页 #

这里用Meteor官方的withTracker高阶组件获取用户登录状态，结合react-router的Switch、Redirect实现路由拦截：

import React from 'react';
import { Route, Redirect, Switch } from 'react-router-dom';
import { withTracker } from 'meteor/react-meteor-data';
// 引入你的登录页和主应用组件（需要自己创建）
import LoginPage from './LoginPage.jsx';
import Dashboard from './Dashboard.jsx';
import Profile from './Profile.jsx';

class Main extends React.Component {
  render() {
    const { isAuthenticated, isLoggingIn } = this.props;

    // 正在登录时显示加载状态，避免页面闪烁
    if (isLoggingIn) {
      return <div>加载中...</div>;
    }

    return (
      <Switch>
        {/* 外置登录页：未登录可访问，登录后自动跳转到主页面 */}
        <Route 
          path="/login" 
          render={() => 
            isAuthenticated ? <Redirect to="/dashboard" /> : <LoginPage />
          } 
        />

        {/* 主应用路由：只有登录后才能访问，未登录自动跳转到登录页 */}
        <Route 
          path="/" 
          render={() => 
            isAuthenticated ? (
              <div className="main-app-layout">
                {/* 这里可以放主应用的导航栏、侧边栏等公共布局 */}
                <Switch>
                  <Route path="/dashboard" component={Dashboard} />
                  <Route path="/profile" component={Profile} />
                  {/* 默认跳转到Dashboard */}
                  <Redirect from="/" to="/dashboard" />
                </Switch>
              </div>
            ) : (
              // 重定向到登录页时，保存当前访问的路径，登录后跳转回去
              <Redirect 
                to={{
                  pathname: "/login",
                  state: { from: this.props.location }
                }} 
              />
            )
          } 
        />
      </Switch>
    );
  }
}

// 用withTracker订阅Meteor用户状态
export default withTracker(() => {
  return {
    // 判断是否已登录：Meteor.user()存在则为true
    isAuthenticated: !!Meteor.user(),
    // 判断是否正在登录中
    isLoggingIn: Meteor.loggingIn()
  };
})(Main);

步骤3：在登录页中获取当前路由并处理跳转 #

如果需要登录成功后跳回用户之前访问的路径，可以用withRouter注入的location和history props实现：

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

class LoginPage extends React.Component {
  state = { username: '', password: '' };

  handleLogin = async () => {
    try {
      // 这里写你的Meteor登录逻辑，比如 Accounts.loginWithPassword
      await Meteor.loginWithPassword(this.state.username, this.state.password);
      // 登录成功后，跳转到之前保存的路径，默认跳转到Dashboard
      const redirectPath = this.props.location.state?.from?.pathname || '/dashboard';
      this.props.history.push(redirectPath);
    } catch (error) {
      alert('登录失败：' + error.reason);
    }
  };

  render() {
    return (
      <div className="login-page">
        {/* 登录表单 */}
        <input 
          type="text" 
          placeholder="用户名" 
          onChange={(e) => this.setState({ username: e.target.value })} 
        />
        <input 
          type="password" 
          placeholder="密码" 
          onChange={(e) => this.setState({ password: e.target.value })} 
        />
        <button onClick={this.handleLogin}>登录</button>
      </div>
    );
  }
}

export default withRouter(LoginPage);

内容的提问来源于stack exchange，提问作者Gihan Rangana