如何在React中动态链接到指定路由？（含嵌套路由配置）

嘿，针对你提出的问题，结合你给出的嵌套路由配置（看得出来是React Router v3的写法，因为用到了IndexRoute），我给你梳理清楚具体的实现方式，还有几个容易踩的坑～

首先先修正你路由配置里的一个关键问题：嵌套子路由的路径应该用相对路径，不要以斜杠/开头。如果用绝对路径的话，会直接忽略父路由的/dashboard前缀，导致子路由无法正确嵌套到Dashboard组件下。修正后的routes.js应该是这样：

import { Route, IndexRoute } from 'react-router';
import Dashboard from './components/Dashboard';
import Home from './components/Home';
import Myplan from './components/Myplan';
import MyProfile from './components/MyProfile';
import Users from './components/Users';
import Notifications from './components/Notifications';
import Report from './components/Report';

export default (
  <Route path="/dashboard" component={Dashboard}>
    <IndexRoute component={Myplan} /> {/* Dashboard的默认路由 */}
    <Route path="home" component={Home} /> {/* 相对路径，对应/dashboard/home */}
    <Route path="myprofile" component={MyProfile} /> {/* 对应/dashboard/myprofile */}
    <Route path="users" component={Users} />
    <Route path="notifications" component={Notifications} />
    <Route path="reports" component={Report} />
  </Route>
);

接下来，实现动态路由链接主要有两种方式：

1. 声明式跳转：使用Link组件 #

这是React Router推荐的方式，适合在UI中做导航链接，比如侧边栏、顶部导航栏。你可以动态传入路由路径到to属性中。

首先在Dashboard组件里确保渲染子路由的出口（{this.props.children}），不然子组件无法显示：

import { Link } from 'react-router';

class Dashboard extends React.Component {
  render() {
    // 比如从状态或props里动态获取要跳转的路由
    const dynamicTarget = "/dashboard/users";

    return (
      <div className="dashboard-container">
        {/* 导航栏 */}
        <aside className="sidebar">
          <Link to="/dashboard">我的计划</Link> {/* 对应IndexRoute的Myplan */}
          <Link to="/dashboard/home">首页</Link>
          <Link to="/dashboard/myprofile">我的资料</Link>
          <Link to={dynamicTarget}>动态跳转到用户管理</Link> {/* 动态路径 */}
          <Link to="/dashboard/notifications">通知</Link>
          <Link to="/dashboard/reports">报表</Link>
        </aside>

        {/* 子路由组件会渲染在这里 */}
        <main className="content-area">
          {this.props.children}
        </main>
      </div>
    );
  }
}

2. 命令式跳转：使用history对象 #

适合在事件触发后跳转（比如登录成功后重定向、按钮点击跳转），有两种方式获取history：

全局browserHistory（适合任何组件） #

导入browserHistory后直接调用push方法：

import { browserHistory } from 'react-router';

class Login extends React.Component {
  handleLoginSuccess = () => {
    // 登录逻辑验证通过后
    // 重定向到Dashboard的默认路由（Myplan）
    browserHistory.push("/dashboard");
    
    // 如果要直接跳转到指定子路由，比如用户管理页
    // browserHistory.push("/dashboard/users");
  }

  render() {
    return (
      <button onClick={this.handleLoginSuccess}>登录</button>
    );
  }
}

组件内的this.props.history（仅路由渲染的组件可用） #

如果组件是通过路由直接渲染的（比如Home、MyProfile这些子组件），可以直接通过props获取history对象：

class Home extends React.Component {
  goToProfile = () => {
    // 跳转到我的资料页
    this.props.history.push("/dashboard/myprofile");
  }

  render() {
    return (
      <div>
        <h1>首页</h1>
        <button onClick={this.goToProfile}>查看我的资料</button>
      </div>
    );
  }
}

关键注意点 #

• 父组件必须包含{this.props.children}，作为子路由组件的渲染出口
• 嵌套子路由一定要用相对路径（不要加/开头），否则会脱离父路由的嵌套关系
• 如果是动态生成路径，可以把路径存在组件的state或props中，再传入Link的to属性或history.push()的参数里

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