首页 其他开发 React redux 和 React router，链接更改不会重新渲染视图
React redux 和 React router，链接更改不会重新渲染视图
[英] React redux and React router,link change does not re render view
本文介绍了React redux 和 React router，链接更改不会重新渲染视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些
由 connect-ed.单击链接时，地址栏中的 url 会发生变化，但呈现的组件视图不会发生变化.然而，正确的视图是在刷新时呈现的.
容器组件的代码(带有路由器和链接的)
upload.js
import React, { Component } from "react";进口 {BrowserRouter 作为路由器，路线，转变，重定向，关联来自反应路由器-dom"；从./fileUpload1"导入 FileUpload1；从./fileUpload2"导入文件上传2；从./fileUpload3"导入 FileUpload3；导出默认类上传扩展组件{使成为() {返回 (<div><div><Link to={`${this.props.match.url}/p`}>上传1</Link> <div><Link to={`${this.props.match.url}/t`}>上传2</Link>
<div><Link to={`${this.props.match.url}/e`}>上传3</Link>
<路由器><开关><路线路径={`${this.props.match.url}/p`}渲染={道具=>(<FileUploadPassport {...props} tabID="1"/>)}/><路线路径={`${this.props.match.url}/t`}渲染={道具=><FileUpload2 {...props} tabID="2"/>}/><路线路径={`${this.props.match.url}/e`}渲染={道具=><FileUpload3 {...props} tabID="3"/>}/></开关></路由器>
);}}
这是fileUpload1
import React, { Component } from "react";import { withRouter } from "react-router-dom";从react-redux"导入{连接}；类 FileUpload1 扩展组件 {构造函数(道具){超级(道具)；this.state = {};}componentWillMount() {console.log("安装");}componentDidMount() {console.log("挂载");}使成为() {返回 (<div><h1>你好</h1> );}}const mapStateToProps = (state, ownProps) =>({测试:state.initState.testStuff});导出默认 withRouter(连接(mapStateToProps，空)(文件上传1));
我尝试使用 withRouter 包装 fileupload1.js 文件的默认导出，但无济于事.我怎样才能让 FileUpload1 组件在点击相应的
解决方案
Link 组件改变了 Router 上下文中的 history，所以您需要确保 Link 组件在您的 Router 中呈现.
最好只有一个 BrowserRouter 组件位于应用的顶部
export default class Uploads extends Component {使成为() {返回 (<路由器><div><div><Link to={`${this.props.match.url}/p`}>上传1</Link> <div><Link to={`${this.props.match.url}/t`}>上传2</Link>
<div><Link to={`${this.props.match.url}/e`}>上传3</Link>
<开关><路线路径={`${this.props.match.url}/p`}渲染={道具=><FileUploadPassport {...props} tabID="1"/>}/><路线路径={`${this.props.match.url}/t`}渲染={道具=><FileUpload2 {...props} tabID="2"/>}/><路线路径={`${this.props.match.url}/e`}渲染={道具=><FileUpload3 {...props} tabID="3"/>}/></开关>
</路由器>);}}
I a few <Link/> elements and a few corresponding components that are rendered via the <Route/>
The components that are being rendered by <Route/> are redux connect-ed.
On clicking the links,the url in the address bar changes but not the rendered component view.
However,the proper view is rendered on refreshing.
Code for the container component(the one with the Routers and Links)
upload.js
import React, { Component } from "react";
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
Link
} from "react-router-dom";
import FileUpload1 from "./fileUpload1";
import FileUpload2 from "./fileUpload2";
import FileUpload3 from "./fileUpload3";
export default class Uploads extends Component {
render() {
return (
<div>
<div>
<Link to={`${this.props.match.url}/p`}>Upload 1</Link>
</div>
<div>
<Link to={`${this.props.match.url}/t`}>Upload 2</Link>
</div>
<div>
<Link to={`${this.props.match.url}/e`}>Upload 3</Link>
</div>
<Router>
<Switch>
<Route
path={`${this.props.match.url}/p`}
render={props => (
<FileUploadPassport {...props} tabID="1" />
)}
/>
<Route
path={`${this.props.match.url}/t`}
render={props => <FileUpload2 {...props} tabID="2" />}
/>
<Route
path={`${this.props.match.url}/e`}
render={props => <FileUpload3 {...props} tabID="3" />}
/>
</Switch>
</Router>
</div>
);
}
}
This is fileUpload1
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
class FileUpload1 extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentWillMount() {
console.log("Mounting");
}
componentDidMount() {
console.log("mounted");
}
render() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => ({
test: state.initState.testStuff
});
export default withRouter(
connect(mapStateToProps,null)(FileUpload1)
);
I have tried wrapping the fileupload1.js file's default export with withRouter but to no avail.
How can I get the FileUpload1 component to render on clicking the corresponding <Link/> ?
解决方案
The Link components changes the history from the Router context, so you need to make sure the Link components are rendered inside your Router.
It's good practice to just have one BrowserRouter component at the top of your app
export default class Uploads extends Component {
render() {
return (
<Router>
<div>
<div>
<Link to={`${this.props.match.url}/p`}>Upload 1</Link>
</div>
<div>
<Link to={`${this.props.match.url}/t`}>Upload 2</Link>
</div>
<div>
<Link to={`${this.props.match.url}/e`}>Upload 3</Link>
</div>
<Switch>
<Route
path={`${this.props.match.url}/p`}
render={props => <FileUploadPassport {...props} tabID="1" />}
/>
<Route
path={`${this.props.match.url}/t`}
render={props => <FileUpload2 {...props} tabID="2" />}
/>
<Route
path={`${this.props.match.url}/e`}
render={props => <FileUpload3 {...props} tabID="3" />}
/>
</Switch>
</div>
</Router>
);
}
}
这篇关于React redux 和 React router，链接更改不会重新渲染视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
