个人中心
gpt4 book ai didi

javascript - React 如何让组件检测路由变化

转载 作者：行者123 更新时间：2023-12-03 23:18:07 26 4
gpt4 key购买 nike

我有 3 条渲染相同组件的路线 <MainContainer/> ，我想根据位置改变这些组件内部的状态。

路线:

import React from 'react'
import { browserHistory, HashRouter, Route, Switch } from 'react-router-dom'

import { MainContainer } from '../containers'
import { LoginContainer } from '../containers'

const Routes = () => {
  return (
    <HashRouter history={ browserHistory }>
      <Switch>
        <Route exact={ true } path="/" component={ LoginContainer }/>
        <Route exact={ true } path="/dashboard" component={ MainContainer }/>
        <Route exact={ true } path="/dashboard/services" component={ MainContainer }/>
        <Route exact={ true } path="/dashboard/users" component={ MainContainer }/>
      </Switch>
    </HashRouter>
  );
}

export default Routes

问题是 componentDidMount 只触发一次，并且在路径更改时不会再次触发:

enter image description here

如何在 React 中使用 hashRouter 来检测路由的状态？

侧边栏 
import React from 'react'
import { withRouter } from 'react-router-dom'

class Sidebar extends React.Component {

  constructor(props) {
        super(props);
        this.state = {}
    this.navigate = this.navigate.bind(this);
    }

  navigate(path) {
    this.props.history.push(`/dashboard/${path}`);
  }

  render () {
    return (
      <aside className="sidebar">
        <div>
          <h1>Main</h1>
          <ul>
            <li onClick={ () => this.navigate('services')}>Services</li>
            <li onClick={ () => this.navigate('users')}>Users</li>
          </ul>
        </div>
      </aside>
    )
  }
}

export default withRouter(Sidebar)

主容器 
import React, { Component } from 'react'
import { connect } from 'react-redux'
import store from '../../store'
import * as firebase from 'firebase'

// Components
import { Sidebar } from '../../components'
import { Header } from '../../components'

// Containers
import UserListContainer from '../Users/UserListContainer'
import Body from './Body'

// Actions
import { addCurrentUser, searchUser, usersService, servicesService } from '../../actions'

export class Main extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        firebase.auth().onAuthStateChanged((user) => {
      this.checkAuth();
    });
    }

    checkAuth() {
        const user = firebase.auth().currentUser;
        this.props.addCurrentUser(user.email);
    }

    render() {
        return (
            <main>
                <Header currentUser={ this.props.currentUser }/>
                <section className="main-body">
                    <Sidebar />
                    <Body service={this.props.service}/>
                </section>
            </main>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        service: state.globalReducer.service,
        currentUser: state.globalReducer.currentUser
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        searchUser: (user) => { dispatch(searchUser(user)) },
        addCurrentUser: (user) => { dispatch(addCurrentUser(user)) },
        usersService: () => { dispatch(usersService()) },
        servicesService: () => { dispatch(servicesService()) }
    }
}

const MainContainer = Main;
export default connect(mapStateToProps, mapDispatchToProps)(MainContainer)

最佳答案

如果您想在使用 withRouter() 包装的组件中获取当前路径您可以使用 location由 withRouter() 提供给组件的 Prop .
props.location.pathname可能是你在这里感兴趣的。

编辑:

好的，所以你的 <MainContainer />不知道位置。它没有被 withRouter() 包裹.您的 <Sidebar />是，但是我看不到您在使用该信息更改路线时在哪里做任何事情。

编辑#2:

一旦你的组件是位置感知的，你可以添加一个 componentWillReceiveProps生命周期方法并查看您是否在组件中获取这些属性。您可以在组件中的任何位置使用这些属性。

componentWillReceiveProps( nextProps ) {
    const { location, history, match } = this.props;

    console.log( location );
    console.log( history );
    console.log( match );
}

关于javascript - React 如何让组件检测路由变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45244132/

26 4 0
文章推荐： php - Laravel 包含(DatabaseSeeder.php): failed to open stream: No such file or directory
文章推荐： PHP cURL 给出错误，但在 POSTMAN 中工作正常
文章推荐： neural-network - 如何确定卷积神经网络中三重损失的准确性
文章推荐： python - 如何添加身份验证中间件 JWT django？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com