反応を使用するとURLルーティングの問題が発生する

Question

反応を使用してWebアプリケーションを作成していますが、現在はページを移動するときに問題が発生しています。以下は詳細な説明です。誰かが私を助けてくれることを願っている。

最後に私は

: 
: 
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom' 
: 

    <Route path={"/tasks/:type/"} component={Tasks} /> 

を次のように私のコンポーネント（タスク）は、この（simplyfied）

class Tasks extends Component { 

    constructor(props) { 
     super(props); 
     this.type = props.match.params.type; 
    } 


    render(){ 
     return (<h1>{this.type} </h1>); 
    } 
} 

のようなもので、私は反応し-ルータ-DOMを使用して別々のコンポーネントからルーティングを行いますURLを次のように設定してナビゲーションメニューの1つからこのルーティングコンポーネントを呼び出します。

この実装では、（ナビゲーションメニューから）1つのURLを選択すると、期待通りに機能しません。 1つを選択してからもう一方を選択すると、期待通りにナビゲートされません。ブラウザにURLを入力するかページを更新すると、正しいページ（他のURL）に転送されます。 D：

は、私は私の質問を明らかにしたホープ。この問題を解決する方法について、正しい方向で私を導いてくれますか？

おかげ

Answer 1

あなたはルート/タスク/ TYPE1とあなたのルートに定義されている/タスク/ TYPE2を持っている必要があります。 、あなたのケースでは、あなたがタイプに基づいて再レンダリングコンポーネントにしたいおそらくこのような何かを

//Assume MainRoutes.js : which would have your main app navigation routes. 
export default function MainRoutes(props) { 
    return(
    <Router> 
     <App> // Your Main App Component 
      <Switch> 
       <Route path='/' component={SomeHomeComponent}/> 
       <Route path='/tasks' component={TaskRoutes}> 
       <Route component={()=>(<NotFound/>)}/> 
      </Switch> 
     </App> 
    </Router> 
); 
} 

//TaskRoutes.js Component 
. 
. 
. 
<TaskLayout> 
    <Switch> 
     <Route path='/tasks/type1' component={Tasks}/> 
     <Route path='/tasks/type2' component={Tasks}/> 
    </Switch> 
</TaskLayout> 


//TaskLayout.js Component : where you can render your menu items 
. 
. 
. 
<MenuItem> 
    <Link name="application_creation" to="/tasks/type1">Type One</Link> 
</MenuItem> 
<MenuItem> 
    <Link name="application_creation" to="/tasks/type2">Type Two</Link> 
</MenuItem> 
. 
. 
. 

：あなたはこのような何かを設計することができます

class Tasks extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     type: '' 
     } 
    } 

    componentDidMount() { 
     this.setState({ 
     type: this.props.match.params.type 
     }); 
    } 

    render(){ 
     return (<h1>{this.state.type} </h1>); 
    } 
} 

更新：

を

コンポーネントインスタンスが最初にDOMにレンダリングされると、COMPを呼び出す反応させonentDidMount（）が定義されている場合これは、DOMと子参照へのアクセス権を持つ初めての方法です。 コンポーネントインスタンスがレンダリングされ、実行されます。アンマウントされるまで、それは生きて更新されます。

同じコンポーネントと異なるパラメータを持つルートを切り替える場合、ComponentDidMountは一度呼び出されますが、元のコンポーネントはアンマウントまたは再マウントされません。しかし、代わりに新しい小道具を受け取る。したがって、componentWillReceiveProps（newProps）関数を使用してnewProps.paramsを探すことができます。これは予想される動作です。今は、どのようにルートを実装するかによって異なります。 Type1とType2に異なるコンポーネントを使用することができます（必要な場合）。