Wie bekomme ich mitRouter Parallels zur Komponente?

Ich möchte auf die Match-Parameter in der Navigation auf meiner App zugreifen, ich verwende react und react-router-dom. Hier ist ein Code, der für ein einfaches Beispiel erstellt wurde. Wie Sie in der Topics-Komponente sehen können, bekomme ich die richtige Übereinstimmung auf Komponentenebene, aber nicht in der Navigationsleiste, ich bekomme den richtigen URL-Pfad in der Standort-Prop, also bin ich nicht sicher, wenn ich das richtig mache.Wie bekomme ich mitRouter Parallels zur Komponente?

This would be the working snippet, da ich react-router-dom dem Stack-Überlauf-Snippet nicht hinzufügen konnte.

import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom"; 
 

 
const BasicExample = (props) => 
 
    <Router> 
 
    <div> 
 
     <Nav/> 
 
     <hr /> 
 

 
     <Route exact path="/" component={Home} /> 
 
     <Route path="/about" component={About} /> 
 
     <Route path="/topics" component={Topics} /> 
 
    </div> 
 
    </Router>; 
 

 

 
const About =() => (
 
    <div> 
 
    <h2>About</h2> 
 
    </div> 
 
); 
 

 
const Home =() => (
 
    <div> 
 
    <h2>Home</h2> 
 
    </div> 
 
); 
 

 
const Navigation = (props) => (
 
    <ul> 
 
    <li> 
 
     <Link to="/">Home</Link> 
 
    </li> 
 
    <li> 
 
     <Link to="/about">About</Link> 
 
    </li> 
 
    <li> 
 
     <Link to="/topics">Topics</Link> 
 
    </li> 
 
    <li>{`match prop -> ${JSON.stringify(props.match)}`}</li> 
 
    <li>{`location prop -> ${JSON.stringify(props.location)}`}</li> 
 
    </ul> 
 
); 
 

 
const Nav = withRouter(Navigation); 
 

 
const Topic = ({ match, location }) => (
 
    <div> 
 
    <h3>{match.params.topicId}</h3> 
 
    <li>{`match prop -> ${JSON.stringify(match)}`}</li> 
 
    <li>{`location prop -> ${JSON.stringify(location)}`}</li> 
 
    </div> 
 
); 
 

 
const Topics = ({ match, location, history }) => (
 
    <div> 
 
    <h2>Topics</h2> 
 
    <li>{`match prop -> ${JSON.stringify(match)}`}</li> 
 
    <li>{`location prop -> ${JSON.stringify(location)}`}</li> 
 
    <ul> 
 
     <li> 
 
     <Link to={`${match.url}/rendering`}> 
 
      Rendering with React 
 
     </Link> 
 
     </li> 
 
     <li> 
 
     <Link to={`${match.url}/components`}> 
 
      Components 
 
     </Link> 
 
     </li> 
 
     <li> 
 
     <Link to={`${match.url}/props-v-state`}> 
 
      Props v. State 
 
     </Link> 
 
     </li> 
 
    </ul> 
 

 
    <Route path={`${match.url}/:topicId`} component={Topic} /> 
 
    <Route 
 
     exact 
 
     path={match.url} 
 
     render={() => <h3>Please select a topic.</h3>} 
 
    /> 
 
    </div> 
 
); 
 

 

 
ReactDOM.render(<BasicExample />, document.getElementById("root"));

<body> 
 
    <div id="root"></div> 
 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
</body>

Quelle

2017-08-17 piptin

Ja, Sie tun es richtig und es ist normal. match param ist etwas wie Informationen der Eltern Route, warum es passt (und Rendering). In Ihrem Fall in <Nav> wird es nur einige Root-Informationen zeigen.

In zum Nachweis zum Beispiel :topicId in <Nav> sould Sie matchPath aus react-router-dom importiert verwenden:

matchPath(location.pathname, { path:'/topics/:topicId'})

Quelle

2017-08-17 13:52:40 Melounek

Ich sehe, ich dachte, es Information aus den '' weitergegeben. Du würdest nicht zufällig wissen, wie ich tun soll, was ich tun möchte, nicht wahr? :) – piptin

Ich denke, ich verstehe nicht ... Sie haben genug Informationen in props.location, oder was genau suchen Sie in der Requisiten? (das ist genau so, wie es sein sollte) – Melounek

Ich wollte, dass der Parameter ': topicId' aus der' ' Komponente über die Navigationsleiste zugänglich ist, um Elemente zur Navigation in Bezug auf das Vorhandensein bestimmter Parameter hinzuzufügen. Zum Beispiel verwende ich eine Datenbank-ID in der URL, die ich nicht unterscheiden kann, wenn sie aus einer oder einer anderen Datenbank stammen, es sei denn, ich habe den Parameternamen. – piptin

Wie bekomme ich mitRouter Parallels zur Komponente?

Antwort

Verwandte Themen