阵营溃败V-4'this.props.match.params` ** **未定义和'staticContext`未定义
我使用阵营溃败V-4'this.props.match.params` ** **未定义和'staticContext`未定义
"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}
它给不确定
为什么staticContext: undefined
和我的props.match.params
为空对象。
删除斜线嵌套路线path=":article"
而不是path="/:article"
没有变化......输出仍然是'undefined' –
@JavaScriptLearner为什么你使用相同的组件嵌套路线?尝试在嵌套路由中使用component = {AnotherComponent},并显然将console.log(this.props)移动到AnotherComponent。 –
我是新来的,我正在练习,并尝试学习,但现在我无法得到'props.match.params'我不知道它为什么显示为null –
之前看看这个basic example从反应路由器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
你有多搞笑复制形式文档链接已经从@maxim得到评论..顺便说一句,感谢您的帮助:) –
不知道你的意思是如何有趣的是我从文档中复制了一些东西......我提供了它,因为链接可能过时,这是为了帮助整个社区。无论如何,是的,你需要为任何你想嵌套路由的页面做这件事。虽然你可能不需要嵌套路由,你可能只需要根据搜索参数在组件内进行条件呈现。如果是这样的话,你应该看看HoC [withRouter](https://reacttraining.com/react-router/web/api/withRouter)。 –
对不起我的坏评论其实,我已经从#maxim评论[Link__](https://reacttraining.com/react-router/web/example/basic)解决了。 但是,感谢您的建议,我也将学**与路由器** –
@KyleRichardson这些都不是同样的问题... –
您是否尝试过你的嵌套正确的路线,看看你的问题是固定的吗? –