我有一个针对动态参数的路由。例如,当URL为
当我点击导航链接时,URL会更改,但除非我刷新页面,否则不会呈现新内容。
我的代码:
my-app.com/about
时,它将从REST API获取关于页面的JSON数据。我使用一个名为Page的组件来处理所有URL参数。当我点击导航链接时,URL会更改,但除非我刷新页面,否则不会呈现新内容。
我的代码:
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<NavLink to='/home'>Home</NavLink>
<NavLink to='/about'>About</NavLink>
<NavLink to='/contact'>Contact</NavLink>
<Switch>
<Route path="/:slug" component={ Page } />
</Switch>
</div>
</BrowserRouter>
);
}
}
我的页面组件。我正在获取JSON以渲染页面内容:
import React, { Component } from 'react';
import axios from 'axios';
class Page extends Component {
constructor() {
super();
this.state = {
page: []
};
}
componentDidMount() {
axios.get('http://example.com/wp-json/wp/v2/pages?slug=' + this.props.match.params.slug)
.then(response => {
this.setState({ page: response.data });
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<div>
<h2>Single Page template</h2>
{this.state.page.map(single => {
return(
<div>
<h1>{single.title.rendered}</h1>
<p>{single.content.rendered}</p>
</div>
);
})}
</div>
);
}
}
export default Page;
当我点击不同的链接时,如何在路由器中呈现新数据?而不需要重新加载页面。