尝试每个“bugfix”后反应 - 路由器redux推送仍然没有重新渲染,

时间:2018-03-28 14:25:41

标签: reactjs redux react-router

我们仍然遇到这样的问题:从'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}`));
};

非常感谢你们

1 个答案:

答案 0 :(得分:0)

从您发布的代码中我们可以看到您正在使用BrowserRouter。这使用HTML5历史记录API,将您的UI与浏览器网址同步。

要与Redux一起使用,您可以使用Router并传递自己的历史记录对象。在创建redux存储时,也会将相同的历史对象提供给路由器中间件。例如,请参阅react-router-redux

假设您正确设置了提供程序,使用ConnectedRouter而不是react-router-redux库自动使用通过上下文传递给提供程序的商店。

同样来自this important note我们知道简单地将组件包装在此HOC中不会导致路由转换的重新呈现,除非其父组件重新呈现。所以也许这也是一个问题。

如果上述任何一点都无法帮助您解决问题,请提供更多代码,我们很乐意再看一下。