我们仍然遇到这样的问题:从'react-router-redux'推送之后,网址会发生变化但dom不会重新渲染。即使在阅读和尝试之后:
app.js
import React from 'react';
import { Reboot } from 'material-ui';
import { Switch, Route, BrowserRouter as Router, withRouter } from 'react-router-dom';
import Shell from '../Shell';
import Home from '../Home';
import Verify from '../Verified';
import Event from '../Event/EventWrapper';
import RoomWrapper from '../Room/RoomWrapper';
import Room from '../Room/RoomComponent';
const App = () => (
<React.Fragment>
<Reboot/>
<Router>
<div>
<Shell/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/room" component={RoomWrapper}/>
<Route path="/room/:id" component={Room}/>
<Route exact path="/event" component={Event}/>
<Route exact path="/verify" component={Verify}/>
</Switch>
</div>
</Router>
</React.Fragment>
);
export default withRouter(App);
组件
const mapDispatchToProps = dispatch => ({
handleCreate: (roomName, roomHash) => {
dispatch(valueRoomCreateWithRouteChange(roomName, roomHash));
},
});
@withRouter
@connect(mapStateToProps, mapDispatchToProps)
@withStyles(styles)
class RoomCreate extends React.Component {
state = {
name: String,
};
handleChange = event => this.setState({ name: event.target.value });
render() {
const { name } = this.state;
const {
classes, handleCreate,
} = this.props;
return (
<React.Fragment>
<div className={classes.relative}>
<TextField
className={classes.textField}
onChange={this.handleChange}
autoFocus
margin="dense"
id="name"
label="Room name"
type="text"
fullWidth
required/>
<Button raised color="secondary"
onClick={() => {
handleCreate(name, randomString({ length: 5, letters: 'uppercase' }));
}}
className={classes.primary}>
Create
</Button>
</div>
</React.Fragment>
);
}
}
动作
import { push } from 'react-router-redux';
export const ROOM_CREATE = 'ROOM_CREATE';
export const valueRoomCreate = (roomName, roomHash) => ({
type: ROOM_CREATE,
roomName,
roomHash,
created: true,
});
// TODO: Implement async method wi`enter code here`th router push
export const valueRoomCreateWithRouteChange = (roomName, roomHash) => (dispatch) => {
dispatch(valueRoomCreate(roomName, roomHash));
dispatch(push(`/room/${roomHash}`));
};
非常感谢你们
答案 0 :(得分:0)
从您发布的代码中我们可以看到您正在使用BrowserRouter。这使用HTML5历史记录API,将您的UI与浏览器网址同步。
要与Redux一起使用,您可以使用Router并传递自己的历史记录对象。在创建redux存储时,也会将相同的历史对象提供给路由器中间件。例如,请参阅react-router-redux。
假设您正确设置了提供程序,使用ConnectedRouter而不是react-router-redux库自动使用通过上下文传递给提供程序的商店。
同样来自this important note我们知道简单地将组件包装在此HOC中不会导致路由转换的重新呈现,除非其父组件重新呈现。所以也许这也是一个问题。
如果上述任何一点都无法帮助您解决问题,请提供更多代码,我们很乐意再看一下。