ReactJS路由器不渲染组件

Question

我在下面的代码中遇到了路由路径<Route path="customers/:id" render={(props) => <CusDataForm {...props}/>}/> 的问题：

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;

如果我使用<Route exact path="/customers/:id" component={CusDataForm} />，组件会正确渲染；但是，我需要将一些道具传递给这个组件。

我的调用组件是这样定义的：

class CusDataGrid extends Component {
    constructor(props) {
        super(props)
        this.state = {data: []}
    }
    componentDidMount() {
        let me = this;
        dbFetch("customers",data => me.setState({data:data}));
    }
    callEdit = e => {
        let recid = e.target.getAttribute("data")
        this.props.history.push("/customers/"+recid);
    }
    render() {
        const rows = this.state.data.map((row, ndx) => {
            return (
                <div key={ndx}><button data={row.recordid} className="waves-effect waves-light btn-small" onClick={this.callEdit}>Edit</button></div>
            );
        });
        return (
            <div id="cusdata"><div className="data-scrollable">{rows}</div></div>
        );
    }
};
export default CusDataGrid;

我的目标组件是：

class CusDataForm extends Component{    
    componentDidMount = () =>{     
        this.setState({id: this.props.id ? this.props.id : ""});
    }    
    render(){
        return(<div>HELLO</div>)
    }
}
export default CusDataForm;

请让我知道我做错了什么。谢谢！

Answer 1

你可以使用钩子 useParams

    <Switch>
      <Route path="/:id" children={<Child />} />
    </Switch>

    function Child() {
    // We can use the `useParams` hook here to access
    // the dynamic pieces of the URL.
    let { id } = useParams();

     return (
     <div>
      <h3>ID: {id}</h3>
     </div>
    );
   }

official documentation