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のために同じである必要があります。
どうすればこの問題を解決できますか？
/ 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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加