私は反応するのが新しく、を作成して、dyのデータの次または前の項目に移動しました(たとえば、user/2ビュー、前のリンクはuser/1に行き、次のリンクはuser/3に行きます)、URLは正しく変更されますが、コンポーネントは全くレンダリングされず、データはまったく再ロードされません。React-router-dom - 変更URLをリンクしますが、レンダリングしません
私は、子コンポーネントが状態を変更していないことを検出していないため、親コンポーネントがレンダリングしないためです。
私はwithRouter
を使用しようとしましたが、私はエラーが持っている:誰かがそれを解決し、いくつかの説明を持っている場合、私は感謝されるYou should not use <Route> or withRouter() outside a <Router>
をし、私はそうやって理解していないよ:)
App.js:
import React, { Component } from 'react';
import {
Route,
Switch,
withRouter,
} from 'react-router-dom';
import HomePage from './pages/home';
import SinglePage from './pages/single';
class App extends Component {
render() {
return (
<Switch>
<div>
<Route exact path="/" component={HomePage} />
<Route path="/:id" component={SinglePage} />
</div>
</Switch>
);
}
}
export default withRouter(App);
Single.js:
import React, { Component } from 'react';
import Details from '../components/details'
import Header from '../components/header'
import { ProgressBar } from 'react-materialize';
class SinglePage extends Component {
constructor(props) {
super(props);
this.state = {
data: { data: null },
}
}
componentDidMount() {
fetch(`http://localhost:1337/${this.props.match.params.id}`)
.then((res) => res.json())
.then((json) => {
this.setState({
data: json,
});
});
}
render() {
const { data } = this.state;
return (
<div>
<h2> SinglePage </h2>
{!data ? (
<ProgressBar />
) : (
<div>
<Header id={this.props.match.params.id} />
<Details item={data} />
</div>
)}
</div>
);
}
}
export default SinglePage;
Header.js:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link, withRouter } from 'react-router-dom';
class Header extends Component {
static propTypes = {
item: PropTypes.shape({
data: PropTypes.string.isRequired,
}).isRequired,
}
render() {
const prev = parseInt(this.props.id) - 1
const next = parseInt(this.props.id) + 1
return (
<div>
<Link to="/"> Retour </Link>
<Link to={`/${prev}`}> Précédent </Link>
<Link to={`/${next}`}> Suivant </Link>
</div>
)
}
}
export default Header;