如何让路由器将匹配参数传递给组件？

问题描述：

我想使用react和react-router-dom来访问我的应用程序导航上的匹配参数。这里是一个简单的例子，我做了一个代码，你可以在主题组件上看到我在组件级别获得正确的匹配，但不在导航栏中，我在位置道具中获得正确的url路径，所以我不是当然，如果我这样做是正确的。如何让路由器将匹配参数传递给组件？

This would be the working snippet，因为我无法将react-router-dom添加到堆栈溢出片段。

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>

答

是的，你是对做它，这是正常的。 match param有点像父路由为什么匹配（和呈现）的信息。因此，在你的情况下，它将显示一些根信息。

在用于<Nav>检测例如:topicId您使用前人的精力从matchPath进口react-router-dom：

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

我看，我认为这是从''传下来的信息。你不会碰巧知道如何去做我想做的事，不是吗？ :) – piptin

我想我不明白...你在props.location中有足够的信息，或者你在props.match中找到了什么？（这正是它应该如何） – Melounek

我想要从导航栏访问组件中的'：topicId'参数，以便将某些项添加到导航中以确定是否存在某些参数。例如，我在URL中使用数据库ID，如果它们来自一个数据库或另一个数据库，我无法辨别它，除非我拥有参数名称。 – piptin

如何让路由器将匹配参数传递给组件？

相关推荐