react-router-dom: bekomme props.location von innerhalb <BrowserRouter> Komponente

Question

Ich habe eine einfache App, die BrowserRouter von 'react-router-dom' v4 verwendet. Ich versuche, die location.pathname Eigenschaft zuzugreifen aus der <BrowserRouter/> Komponente, ohne Erfolg:

class App extends Component{ 
    render(){ 
    return (
     <BrowserRouter> 
     // How do I access this.props.location? 
     <div className={(this.props.location.pathnme === "/account") ? "bgnd-black" : "bgnd-white"} > 
      <Switch> 
      <Route path="/login" component={LoginPage}/> 
      <Route path="/success" component={LoginSuccess}/> 
      <Route path="/account" component={MyAccount}/> 
      ... 
      <Route component={Error404}/> 
      </Switch> 
     </div> 
     </BrowserRouter> 
    ); 
    } 
} 

Ich weiß, dass ich Stromweg Lage der App mit this.props.location.pathname durch die untergeordneten Komponenten zugreifen können, aber ich muss für den Zugriff aus die übergeordnete Komponente, direkt unter <BrowserRouter/>, um zusätzliche Logik auszuführen, die sich nicht auf untergeordnete Komponenten bezieht. Wie kann ich diesen Ort bekommen?

Answer 1

Sie können es auch tun mit withRouter erneut rendern zu müssen, die den Code zu setzen in einem render Parameter ein ähnliches Ergebnis hat und vermeidet die Notwendigkeit einer "Fälschung" <Route/>.

Im Wesentlichen legen Sie die JSX, die den Speicherort in einer eigenen Komponente kennen, die von withRouter verpackt ist. Dies liefert den Ort der Komponente:

import { withRouter } from 'react-router-dom'; 

const Content = withRouter(props => 
    <div className={(props.location.pathname === "/account") ? "backg... 
    ... 
    </div> 
); 

Dann nutzen Sie, dass in Ihrem Haupt-Router Abschnitt:

class App extends Component{ 
    render() { 
     return (
      <BrowserRouter> 
       <Content/> 
       ... 

Answer 2

Sie erreichen, was u für diese

, indem Sie gefragt haben

import AccessRoute from './AccessRoute' 

class App extends Component{ 
    render(){ 
    return (
     <BrowserRouter> 

    <AccessRoute>  
<div className={(this.props.location.pathnme === "/account") ? "bgnd-black" : "bgnd-white"} > 
      <Switch> 
      <Route path="/login" component={LoginPage}/> 
      <Route path="/success" component={LoginSuccess}/> 
      <Route path="/account" component={MyAccount}/> 
      ... 
      <Route component={Error404}/> 
      </Switch> 
     </div> 
     </AccessRoute>  
     </BrowserRouter> 
    ); 
    } 
} 

AccessRoute.jsx

import React from 'react' 
import {withRouter} from 'react-router'; 
class AccessRoute extends React.Component{ 
    constructor(props){ 
     super(props); 
    } 



//If you want to find the location on mount use this 

componentDidMount(){ 
     console.log("the path name is ",this.props.location.pathname); 
    } 


//If you want to find the location on change use this 

    componentDidUpdate(prevprops){ 
    if(this.props.location.pathname!=prevprops.location.pathname){ 
     console.log("the new path name is ",this.props.location.pathname); 
    } 

} 

    render(){ 
     return(

      this.props.children 

      ); 
    } 
} 
export default withRouter(AccessRoute) 

Answer 3

durch ihre GitHub Fragen Nach dem Graben, fand ich die Lösung. Ich muss eine <Route /> innerhalb <BrowserRouter /> rendern und den Rest meiner App in seine render() Funktion mit history als Parameter übergeben. Innerhalb der Renderfunktion kann ich den Speicherort der App in history.location.pathname finden.

class App extends Component{ 
    render(){ 
    return (
     <BrowserRouter> 

     // We must add a parent <Route> and render its children while passing 'history' as parameter 
     <Route path={Paths.reserve} render={(history) => 

      // Within render(), we can find it in history.location.pathname 
      <div className={(history.location.pathname === "/account") ? "background-black" : "background-white"} > 
      <Switch> 
       <Route path="/login" component={LoginPage}/> 
       <Route path="/success" component={LoginSuccess}/> 
       <Route path="/account" component={MyAccount}/> 
       ... 
       <Route component={Error404}/> 
      </Switch> 
      </div> 
      }/> 
     }} /> 
     </BrowserRouter> 
    ); 
    } 
} 

Dies wird die history Parameter automatisch aktualisiert, ohne auf componentDidMount() oder componentDidUpdate()