* 分かりにくかったので大幅に編集しています。患っている問題は変わっておりません。
#リンクをクリックしてもコンポーネントが入れ替わらない
リンクを押すとlocalhost:3000/python
のように押した言語のページに行き、URLパスを取得し、python完全に理解した
と表示されるようになっています。しかし、そのページから他の言語のリンクを押しても、下の画像のようにコンポーネントは入れ替わらないままです。(ページをリロードするとようやく入れ替わります。)
該当のコード
App.js
javascript
1import React, { Component } from 'react'; 2import {Switch, Route, Link} from 'react-router-dom'; 3import './App.css'; 4 5import Card from './components/Card/Card' 6 7class App extends Component { 8 state = { 9 query: '' 10 } 11 12 setLang(lang) { 13 this.setState({query: lang}) 14 } 15 16 render () { 17 const langs = ["python", "javascript", "go", "React", "Swift"]; 18 19 return( 20 <div> 21 <header> 22 <h2>Connpassion</h2> 23 <ul>{ langs.map((lang, idx) => { 24 return <li key={idx} onClick={this.setLang.bind(this, lang)}> 25 <Link to={'/' + lang}>{lang}</Link></li> 26 }) } 27 </ul> 28 </header> 29 <div> 30 <Switch> 31 <Route exact path="/">表示したい言語を選んでください</Route> 32 <Route path={'/' + this.state.query} component={Card} /> 33 </Switch> 34 </div> 35 </div> 36 ); 37 } 38} 39 40export default App;
Card.js
javascript
1import React, {Component} from 'react'; 2 3class Card extends Component { 4 constructor(props) { 5 super(props); 6 var urlPass = window.location.pathname 7 var uP = urlPass.slice(1) 8 console.log(uP) 9 this.state = {lang: uP} 10 console.log(this.state.lang) 11 } 12 13 componentDidMount() { 14 console.log(this.state.lang) 15 } 16 17 render() { 18 /*var urlPass = window.location.pathname 19 var uP = urlPass.slice(1) 20 console.log(uP)*/ 21 22 return( 23 <div>{this.state.lang}完全に理解した</div> 24 ); 25 } 26} 27 28export default Card;
constructor()
を使っているので再びマウントされたら入れ替わるはずです。しかし、実際には起こっていません。App.js
のRoute
の問題なのか分かりません。
試したこと
render()内に書く
しかしこれは将来的にcomponentDidMount()
内でURLパスを使い、APIの取得を考えているのでデータをcomponentDidMount()
に渡せないのでやめました。
componentDidMount()内に書く
stateのセットがうまくできず空になり、またライフサイクルの都合上、DOMにも言語名が表示されませんでした。
なので、上記のコードでリンクを押すとコンポーネントを初期化し読み込んでくれる方法を教えてください!今のままでは入れ替えているはずが、同じCardコンポーネントとして処理され、URL遷移しか行われていない気がします。
追記
URL直叩きでも表示できるようにするため、遷移前のページからデータを渡すことは考えていません。
解決
ベストアンサーのようにRoute
の使い方を正しくし、componentDidUpdate
を併用したら解決しました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/08 12:27 編集
2020/04/08 12:48
2020/04/08 13:13 編集