Question

我使用链接将项目列表重定向到另一个详细信息组件。但是现在，URL随所选ID一起更改，但没有调用详细信息组件。请协助解决我的react-router问题。下面是我的代码：

```
index.js
 <BrowserRouter>
   <Switch>
      <Route path='/' component={App} />
      <Route path='/course/:ID' component={CourseDetail} />
   </Switch>
</BrowserRouter>

  CourseList.js
    
           
            const CourseList=({Courses})=>{
             //map list
            const renderedList= Courses.map(course=>{
                return (<div>
            
                <div class="content">
                <Link  to={{ pathname: 'course/'+course.ID}}                    
                                    key={course.ID}>
                                    View More
                                </Link>    
                </div>
                </div> 
            )
            });
            return (
            <Router><div>
                {renderedList}
                <Route path="course/:ID" component={CourseDetail} />
            </div></Router>);
            }
            export default CourseList;
        
CourseDetail.js

           
            class CourseDetail extends Component {
              state={
                 ID: this.props.match.params.ID,
                 course:null};
                componentDidMount(){
                 //this.runSearch only get called when URL loads, but not when Link        //clicked
                  this.runSearch();
                
               }
              
               runSearch=async()=>{
             
                 const response= await axios.get('API\?{this.props.match.params.ID}')
                 this.setState({course: response.data});
              
               }
            render(){
               //course is null below
            //const course=this.state.course;
           
            return (
               <div>
                Course Detail: ID {this.props.match.params.ID}
            </div>
            ); }   
            };
            export default withRouter(CourseDetail);

Answer 1

您需要为exact指定属性indexRoute，否则即使/course/:ID路由也将与/匹配。

请按如下所示更新您的 index.js 文件。

 <BrowserRouter>
   <Switch>
      <Route exact path='/' component={App} />
      <Route path='/course/:ID' component={CourseDetail} />
   </Switch>
</BrowserRouter>

希望这对您有用！

Answer 2

您需要更改Route声明的顺序。 <Switch>返回第一个匹配的路由，由于您的第一个路由用于/，因此即使URL是ID为课程的详细信息，也将返回该路由。

<Route path='/course/:ID' component={CourseDetail} />
<Route path='/' component={App} />

或者，您也可以将exact设置为默认路由。

<Route exact path='/' component={App} />

Answer 3

问题是您正在使用两个不同的路由器。

为exact路线添加/。

 <BrowserRouter>
   <Switch>
      <Route exact path='/' component={App} />
      <Route path='/course/:ID' component={CourseDetail} />
   </Switch>
</BrowserRouter>

return (
            <React.Fragment>
                {renderedList}
            </React.Fragment>
)

React-router链接更改了URL ID，但组件未重新加载

3 个答案: