ReactJS Router路由组件不渲染：带render属性的Route路径异常

嘿，我帮你排查出了两个导致路由组件不渲染的关键问题，咱们一个个来解决：

1. 路由路径缺少开头的斜杠（最核心原因） #

你在使用render属性的Route里写的路径是path="customers/:id"，但React Router的BrowserRouter要求绝对路径必须以/开头。没有斜杠的话，这个路径会被当成相对路径——比如当你在/customers页面点击编辑按钮跳转到/customers/123时，React Router会尝试匹配/customers/customers/123，这显然不是你想要的路径，所以组件自然不会渲染。

而你用component属性时写的是path="/customers/:id"（带斜杠），所以能正常匹配路由。

修正后的Route代码：

<Route path="/customers/:id" render={(props) => <CusDataForm {...props} />}/>

2. 路由参数获取方式错误 #

你在CusDataForm里尝试通过this.props.id获取路由参数，但React Router的路由参数是存在this.props.match.params对象里的，并不是直接挂在props根节点上的。如果需要传递自定义props，也可以在render函数里一起传入。

修正后的CusDataForm代码： #

class CusDataForm extends Component{
  componentDidMount = () =>{
    // 从match.params中正确获取路由id
    const customerId = this.props.match.params.id || "";
    this.setState({id: customerId});
  }
  render(){
    return(<div>HELLO, 客户ID: {this.state.id}</div>)
  }
}
export default CusDataForm;

传递自定义props的示例： #

如果需要给CusDataForm传递额外的自定义属性，比如编辑标题，可以这么写：

<Route path="/customers/:id" render={(props) => <CusDataForm {...props} pageTitle="编辑客户信息" />}/>

之后在CusDataForm里就能通过this.props.pageTitle拿到这个自定义值。

完整修正后的App组件代码 #

import CusDataCtrl from './cusdata/CusDataCtrl'
import CusDataForm from './cusdata/CusDataForm'
class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/customers" component={CusDataCtrl} />
          {/* 已修正路径，添加开头斜杠 */}
          <Route path="/customers/:id" render={(props) => <CusDataForm {...props} />}/>
        </Switch>
      </BrowserRouter>
    );
  }
}
export default App;

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