React Router如何在App.js中获取URL路径参数并渲染对应页面

• App组件未被Route组件包裹，默认无法获取路由相关属性，你调用的this.props.id永远为undefined，导致外层if判断永远进入else分支，/test路由规则永远不会被加载
• 不需要拆分两个Switch组件做路径判断，React Router的Switch会自动匹配优先级最高的符合规则的路由，直接把所有路由规则放在同一个Switch下即可

import React, { Component } from 'react';

import { HomeComponent } from './Containers/HomeComponent';
import DashboardComponent from './Containers/DashboardComponent';
import ContactComponent from './Containers/ContactComponent';

import { Switch, Route } from 'react-router-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
    };
  }

  render() {
    return (
      <div>
        <Switch>
          {/* 精准匹配/test路径，优先度最高 */}
          <Route path="/test" exact component={ContactComponent} />
          {/* 匹配dashboard带参数路径 */}
          <Route
            path="/dashboard/:id"
            render={(props) => (
              <DashboardComponent {...props} isAuthed={true} />
            )}
          />
          {/* 匹配根路径，优先度最低 */}
          <Route path="" exact component={HomeComponent} />
        </Switch>
      </div>
    );
  }
}

export default App;

修复后访问对应路径即可得到预期结果：

• 访问/test：渲染ContactComponent页面
• 访问/dashboard/任意参数：渲染DashboardComponent，且可在组件内通过this.props.match.params.id拿到路径参数
• 访问根路径/：渲染HomeComponent页面

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