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>
    );
   }

официальная документация