账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react-router v4 路由页面的问题,点击按键地址Url改变,但是需要手动刷新才能跳转显示
    49
    0

    问题如标题所述,点击跳转按键时浏览器可以获取到正常地址,但是需要手动刷新才能正常显示页面,具体代码如下:

    routeMap.jsx

    
    class RouteMap extends Component {
        render(){
            return (
                <BrowserRouter>
                <App>
                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route path="/city" component={City}/>
                        <Route path="/user" component={User}/>
                        <Route path="/search/:type(/:keyword)" component={Search}/>
                        <Route path="/detail/:id" component={Detail}/>
                        <Route path="*" component={NotFound}/>
                        <Redirect from="/" to="/city"/>
                    </Switch>
                </App>
                </BrowserRouter>
            )
        }
    }
    
    export default RouteMap;

    ./HomeHeader/index.jsx

    class HomeHeader extends React.Component {
        constructor(props, context) {
            super(props, context);
            this.shouldComponentUpdate = PureRenderMixin
                .shouldComponentUpdate
                .bind(this);
        }
        render() {
            
            return (
                    <div id="home-header" className="clear-fix">
                        <div className="home-header-left float-left">
                            <Link to="/city">
                            <span>{this.props.cityName}</span>
                            &nbsp;
                            <i className="anticon anticon-down"></i>
                            </Link>
                        </div>
                        <div className="home-header-right float-right">
                            <Avatar shape="square" size="small" icon="user"/>
                        </div>
                        <div className="home-header-middle">
                        <div className="search-container">
                            <i className="anticon anticon-search"></i>
                            <input type="text" placeholder="请输入搜索的关键字"/>
                        </div>
                    </div>
                </div>
            )
        }
    }
    
    export default HomeHeader;

    谢谢

    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 3号快来扶我 普通会员 1楼

      在React Router v4中,路由的刷新可以通过以下方式实现:

      1. 在页面组件的componentDidMount生命周期方法中,设置一个全局状态变量,用于标记是否需要刷新页面。当状态变量为true时,会调用componentWillUnmount方法,将路由刷新。

      javascript componentDidMount() { this.setState({ is刷新: true }); }

      1. componentWillUnmount方法中,检查当前是否需要刷新页面,如果是,则调用history.push方法,将路由刷新。

      javascript componentWillUnmount() { if (this.state.is刷新) { history.push(); } }

      1. 在路由组件的onEnter事件中,更新全局状态变量,表示需要刷新页面。

      javascript onEnter() { this.setState({ is刷新: false }); }

      1. 在页面组件的componentWillUnmount方法中,检查当前是否需要刷新页面,如果是,则调用history.push方法,将路由刷新。

      javascript componentWillUnmount() { if (this.state.is刷新) { history.push(); } }

      通过以上方式,可以在页面组件的componentDidMount生命周期方法中设置全局状态变量,当状态变量为true时,会调用componentWillUnmount方法,将路由刷新。在componentWillUnmount方法中,检查当前是否需要刷新页面,如果是,则调用history.push方法,将路由刷新。在路由组件的onEnter事件中,更新全局状态变量,表示需要刷新页面。在页面组件的componentWillUnmount方法中,检查当前是否需要刷新页面,如果是,则调用history.push方法,将路由刷新。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部