bugfix> reactjs > 投稿

2つの異なるコンポーネントを返すことになっている2つの異なるルートがあります。

新しい投稿を作成するためのフォームを表示するためのルート:

                   <Route exact path='/posts/new'
                       render={(props) => <NewPost
                           {...props}
                       />}/>

IDで投稿を表示する別のルート:

                       <Route exact path='/posts/:id'
                       render={(props) => <ShowPost
                           {...props}
                       />}/>

問題は、/ posts/newに到達しようとすると、「new」のパラメーターでShowPostにアクセスすることです。

ps。 SPA以外のWebサイトをモックしているため、ルートの命名規則をそのまま維持する必要があります。リンクはSEOのために同じである必要があります。

どうすればこの問題を解決できますか?

回答 1 件
  • / posts/newが他のルートより上にあることを確認して、スイッチコンポーネントでルートをラップします。 (スイッチは、場所に一致する最初の子をレンダリングします)。

    import {Switch} from "react-router-dom";
    <Switch>
    <Route exact path='/posts/new'
                           render={(props) => <NewPost
                               {...props}
                           />}/>
     <Route exact path='/posts/:id'
                           render={(props) => <ShowPost
                               {...props}
                           />}/>
    </Switch>
    
    

あなたの答え