Comment obtenir avec router pour transmettre les paramètres de correspondance au composant?

Je veux accéder aux paramètres de match sur la navigation sur mon application, j'utilise react et react-router-dom. Voici un code extrait pour l'exemple simple que j'ai fait, comme vous pouvez le voir sur le composant Sujets, je reçois la bonne correspondance au niveau du composant mais pas dans la barre de navigation, je reçois le bon chemin d'accès Bien sûr, si je fais ça bien. Je n'ai pas pu ajouter react-router-dom à l'extrait de débordement de pile.Comment obtenir avec router pour transmettre les paramètres de correspondance au composant?

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>

Source

2017-08-17 piptin

Oui, vous le faites à droite et il est normal. match param est un peu comme l'information du parent Route pourquoi il correspond (et le rendu). Donc, dans votre cas en <Nav>, il montrera juste quelques informations de racine.

En pour détecter par exemple :topicId dans <Nav> vous utilisez Sould matchPath importés de react-router-dom:

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

Source

2017-08-17 13:52:40 Melounek

Je vois, je pensais qu'il était des informations transmises de la '' . Vous ne sauriez pas comment faire ce que je veux faire, n'est-ce pas? :) – piptin

Je pense que je ne comprends pas ... Vous avez suffisamment d'informations dans props.location, ou que cherchez-vous exactement dans le props.match? (ce qui est exactement ce qu'il devrait être) – Melounek

Je voulais que le paramètre ': topicId' du composant' 'soit accessible à partir de la barre de navigation pour ajouter des éléments à la navigation par rapport à l'existence de certains paramètres. Par exemple, j'utilise l'identifiant de la base de données dans l'URL que je ne peux pas discerner s'ils proviennent d'une base de données ou d'une autre à moins d'avoir le nom du paramètre. – piptin

Comment obtenir avec router pour transmettre les paramètres de correspondance au composant?

Répondre

Questions connexes