Zugriff auf Router Eigenschaften außerhalb Schalterkomponente

Question

Ich reagiere-dom-Router verwenden (React Router v.4)

App Layout:

<div className={classes.root}> 
    <Header /> 
    <div className={classes.body} > 
    <Sidebar /> 
    <div className={classes.content} > 
     <Switch> 
     {mapRoutes(routes)} 
     </Switch> 
    </div> 
    </div> 
</div> 

index.js:

ReactDom.render(
<Provider store={store}> 
    <Router> 
    <MuiThemeProvider theme={theme}> 
     <App /> 
    </MuiThemeProvider> 
    </Router> 
</Provider> 
, MOUNT_NODE); 

mapRoutes nur Karten Routen von einem Objekt

Ich möchte Titel der Seite in der Kopfzeile haben, howeve r, wenn ich auf irgendwelche Verbindungen klicke, die in der Seitenleiste sind, wird this.props.match Objekt in Header Klasse nicht aktualisiert. (Es hat immer eine path von '/')

Ist es möglich, Header Requisiten zu aktualisieren, wenn react-Router Route ändert?

Answer 1

So eine Möglichkeit, um dies zu umgehen, ist Geschichte zu hören. Ich landete Kopfzeile Titel zu trennen Komponente:

// @flow 
import React from 'react'; 
import PropTypes from 'prop-types'; 
import routeToLabel from 'helpers/routeToLabel'; 
import { withRouter } from 'react-router-dom'; 

// $FlowIgnore flow bug 
import Typography from 'material-ui/Typography'; 


class HeaderTitle extends React.Component { 
    static propTypes = { 
    className: PropTypes.string.isRequired, 
    location: PropTypes.shape({ 
     pathname: PropTypes.string, 
    }).isRequired, 
    history: PropTypes.shape({ 
     push: PropTypes.func, 
     listen: PropTypes.func, 
    }).isRequired, 
    } 

    constructor(props) { 
    super(props); 
    this.state = { 
     pathname: props.location.pathname, 
    }; 
    } 

    state = {} 

    componentDidMount() { 
    this.unlisten = this.props.history.listen(this.updateHeaderTitle); 
    } 

    componentWillUnmount() { 
    this.unlisten(); 
    } 

    // Need this placeHolder else an error is thrown 
    unlisten =() => {} 

    updateHeaderTitle = (location) => { 
    if (location.pathname !== this.state.pathname) { 
     this.setState({ pathname: location.pathname }); 
    } 
    } 
    render() { 
    const { className } = this.props; 
    const { pathname } = this.state; 
    return (
     <Typography type="title" color="inherit" className={className}> 
     {routeToLabel(pathname)} 
     </Typography> 
    ); 
    } 
} 

const routedClass = withRouter(HeaderTitle); 
export default routedClass;