Javascript 如何让组件检测到路由更改_Javascript_Reactjs_React Router_React Router Dom

Javascript 如何让组件检测到路由更改

javascript reactjs

Javascript 如何让组件检测到路由更改,javascript,reactjs,react-router,react-router-dom,Javascript,Reactjs,React Router,React Router Dom,我有3条路径渲染相同的组件，我希望这些组件内部的状态根据位置进行更改路线： import React from 'react' import { browserHistory, HashRouter, Route, Switch } from 'react-router-dom' import { MainContainer } from '../containers' import { LoginContainer } from '../containers' const Routes

我有3条路径渲染相同的组件

，我希望这些组件内部的状态根据位置进行更改

路线：

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

从“React”导入React
从“react router dom”导入{browserHistory，HashRouter，Route，Switch}
从“../containers”导入{maincainer}
从“../containers”导入{LoginContainer}
常数路由=（）=>{
返回(
);
}
导出默认路由

问题是componentDidMount只触发一次，当路径更改时不会再次触发：

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

边栏

从“React”导入React
从“react router dom”导入{withRouter}
类侧栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}
this.navigate=this.navigate.bind（this）；
}
导航（路径）{
this.props.history.push（`/dashboard/${path}`）；
}
渲染（）{
返回(
主要

this.navigate（'services'）}>services
this.navigate（'users'）}>users

)
}
}
使用路由器导出默认值（侧栏）

主容器

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../../store”导入存储
从“firebase”导入*作为firebase
//组成部分
从“../../components”导入{Sidebar}
从“../../components”导入{Header}
//容器
从“../Users/UserListContainer”导入UserListContainer
从“/Body”导入正文
//行动
从“../../actions”导入{addCurrentUser，searchUser，usersService，servicesService}
导出类主扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
firebase.auth（）.onAuthStateChanged（（用户）=>{
this.checkAuth（）；
});
}
checkAuth（）{
const user=firebase.auth（）.currentUser；
this.props.addCurrentUser（user.email）；
}
render（）{
返回(
)
}
}
常量mapStateToProps=（状态）=>{
返回{
服务：state.globalReducer.service，
currentUser:state.globalReducer.currentUser
}
}
const mapDispatchToProps=（调度）=>{
返回{
searchUser：（user）=>{dispatch（searchUser（user））}，
addCurrentUser：（用户）=>{dispatch（addCurrentUser（用户））}，
usersService:（）=>{dispatch（usersService（））}，
servicesService:（）=>{dispatch（servicesService（））}
}
}
const MainContainer=Main；
导出默认连接（mapStateToProps、mapDispatchToProps）（主容器）

如果您想在用

withRouter（）包装的组件中获取当前路径

，您可以使用

withRouter（）提供给组件的位置
道具
props.location.pathname
可能是您感兴趣的内容
编辑：
好的，您的
不知道位置。它没有使用withRouter（）
包装。您的
是，但我看不出您在路线更改方面使用该信息做了什么
编辑#2：
一旦您的组件具有位置感知功能，您就可以添加一个componentWillReceiveProps
lifecycle方法，并查看您正在组件中获取这些属性。您可以在组件中的任何位置使用这些属性
componentWillReceiveProps( nextProps ) {
    const { location, history, match } = this.props;

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

是的，我可以在主容器第一次装载时得到，但是当我改变路线，这些路线装载相同的主容器时，它不会重新初始化@Kyle Richardson，补充道！你想在你的答案中添加组件willreceiveprops吗？@azium啊，就是这样！！！想发布你的答案吗？
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)

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

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