Невозможно определить причину, по которой родительский компонент рендерится, а выходные данные отображаются дважды. - PullRequest
Новая
       16

Невозможно определить причину, по которой родительский компонент рендерится, а выходные данные отображаются дважды.

0 голосов
/ 08 января 2019

Каждый раз, когда я щелкаю по компоненту ссылки в компоненте Темы, Компонент Темы отображается снова, так что выходные данные отображаются дважды. Компонент «Темы» является вложенным и имеет компонент «Ссылка на компонент подтемы».

В компоненте Темы есть ссылка на «/ themes /: topicId», и я попытался использовать переключатель, но он не разрешился.

Компонент приложения - 

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

и вывод, когда я нажимаю на ссылку / тему,

/ темы

вывод, когда я нажимаю / themes / реагировать-js

/ темы / реагировать-JS

, как вы можете видеть, response-js отображается дважды, потому что / themes снова выполняется, а затем /topics/react-js.

Может кто-нибудь, пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 08 января 2019

Сначала импортируйте «Switch» из response-router-dom. Затем используйте его как 

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