通过在我的应用url中使用react-router dom在执行此操作时尝试从我的一个React组件转到另一个组件，得到了用于此目的的路由器元素的扩展，并且无法从后端获取我的数据。
请帮助我。实际上，由于这种类型的路由，我的api路径类似于/projectBoard/api/backlog/id09而不是api/backlog/id09来获取数据。
我现在有什么： App.js：
class App extends Component {
render(){
return (
<Provider store={store}>
<Router>
<div className="App">
<Header/>
{/* <DashBoard/> */}
<Route exact path="/dashboard" component={DashBoard}/>
<Route exact path="/projectBoard/:id" component={ProjectBoard}/>
{/*here we r trying to route our component*/}
<Route exact path="/addProjectTask/:id" component={AddProjectTask}/>
<Route exact path="/updateProjectTask/:backlog_id/:pt_id" component=
{UpdateProjectTask}/>
</div>
</Router>
</Provider>
);
}
}
export default App;
**ProjectBoard.js:**
class ProjectBoard extends Component {
//constructor to handle errors
constructor(){
super();
this.state={
errors:{}
};
}
componentDidMount(){
const {id}=this.props.match.params;
// const {addProjectTask}=this.props.match.params;
this.props.getBacklog(id)
}
componentWillReceiveProps(nextProps){
if(nextProps.errors){
this.setState({errors: nextProps.errors});
}
}
render() {
const {id}=this.props.match.params;
const {project_tasks}=this.props.backlog;
const {errors}=this.state;
//const {project_tasks}
let BoardContent;
const boardAlgorithm=(errors,project_tasks)=>{
if(project_tasks.length< 1){
if(errors.projectNotFound){
return(
<div className="alert alert-danger text-center"
role="alert">
{errors.projectNotFound}
</div>
);
}
else{
return(
<div className="alert alert-danger text-center"
role="alert">
No project Tasks on this board
</div>
);
}
}else{
return (<Backlog project_tasks_prop={project_tasks}/>);
}
};
BoardContent=boardAlgorithm(errors,project_tasks);
return (
<div>
<div className="container">
<Link to={`/addProjectTask/${id}`} className="btn btn-primary mb-3">
<i className="fas fa-plus-circle"> Create Project Task</i>
</Link>
<br />
<hr />
{/* <!-- Backlog STARTS HERE --> */}
{BoardContent}
</div>
{/* <!-- PROJECT BOARD ENDS HERE -->
<!-- Spring Boot / React Students please ignore below --> */}
</div>
)
}
}
ProjectBoard.propTypes={
backlog:PropTypes.object.isRequired,
getBacklog:PropTypes.func.isRequired,
errors:PropTypes.object.isRequired
};
const mapStateToProps=state=>({
backlog: state.backlog,
errors:state.errors
});
export default connect(mapStateToProps,{getBacklog}) (ProjectBoard);
**backlogActions.js:**
export const getBacklog=backlog_id=>
async dispatch=>{
try{
const res=await axios.get(`api/backlog/${backlog_id}`);
console.log("api test",res);
dispatch({
type:GET_BACKLOG,
payload:res.data
})
}catch(err){
dispatch({
type:GET_ERRORS,
payload:err.response.data
});
}
};