Question

每当我单击“主题组件”中的链接组件时，“主题组件”都会再次渲染，以便输出显示两次。主题组件是嵌套的，并且具有链接到子主题的组件。

Topics组件具有指向'/ topics /：topicId'的链接，我尝试使用switch却无法解决。

应用组件为

class App extends Component{
    render(){
      return(
       <BrowserRouter>
          <div>
               <Link to={'/'}>Home</Link>
               <Link to={'/topics'}>Topics</Link>
               <Route exact path={'/'} component={Home}/>
               <Route path='/topics' component={Topics}/>
           </div>     
        </BrowserRouter>
           );
           }   
         }

主题组件

function Topics({match}){
    console.log("topics");
    return (
       <div>
         {topics.map(({name,id}) => (
           <li key={id}>
           <Link to={`${match.url}/${id}`}>{name}</Link>
           <Route exact path={`${match.url}/:topicId`} component={Topic}/>
           </li>
       ))} 
       </div>
           );
}

主题组件

function Topic({match}){
    const topic=topics.find(t=> 
    t.id===match.params.topicId;
    );
    return ( 
       <div>
         {topic.name}
       </div>
            );
    }

当我单击链接/ topics时，输出为

/topics

当我单击/ topics / react-js时

输出

/topics/react-js

如您所见，react-js会显示两次，因为再次执行/ topics然后执行/ topics / react-js。

有人可以帮我吗？

Answer 1

首先从react-router-dom导入“ Switch”。然后将其用作

class App extends Component{
render(){
  return(
   <BrowserRouter>
      <div> 
         <Link to={'/'}>Home</Link>
         <Link to={'/topics'}>Topics</Link>
         <Switch>
           <Route exact path={'/'} component={Home}/>
           <Route path='/topics' component={Topics}/>
         </Switch>
       </div>     
    </BrowserRouter>
       );
       }   
     }

无法解决为什么重新渲染父组件并且输出显示两次的原因

1 个答案: