![](/img/trans.png)
[英]React Routing with Dynamic Route Unable to find this.props.match.params
[英]React Rout v-4 `this.props.match.params` **undefined** and `staticContext` undefined
我在用
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
我的潰敗:
<BrowserRouter>
<div>
<Route exact path='/' component={Layout}></Route>
<Route path='/about' name="about" component={About}>
<Route path="/:article" component={anotherAbout}></Route>
</Route>
<Route path='/protfolio' name="protfolio" component={Portfolio}></Route>
</div>
</BrowserRouter >
當我打電話給{this.props.match.params.article}
它給出了undefined
為什么staticContext: undefined
和我的props.match.params
null對象。
請看一下react-router v4文檔中的這個基本示例 。
查看const Topics = ({ match }) => ( ... )
,您將看到此組件底部的嵌套路由。 這是您在react-router v4中嵌套路由的方法。 如果您解決了這個問題,應該解決您的問題。
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
const About = () => (
<div>
<h2>About</h2>
</div>
)
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<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>
)
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
)
export default BasicExample
我認為這是因為嵌套路由而發生的。 而不是使用嵌套的
<BrowserRouter>
<div>
<Route exact path='/' component={Layout}></Route>
<Route path='/about' name="about" component={About}></Route>
<Route path="/about/:article" component={anotherAbout}></Route>
<Route path='/protfolio' name="protfolio" component={Portfolio}></Route>
</div>
</BrowserRouter >
並對網址的匹配參數進行解構
const { article } = this.props.match.params
我覺得這很有效
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.