葛亭路PARAMS在阵营路由器

Question

在下面的代码片段

<Route path='/:category' render={() => (
    <div> 
     {console.log(...)} 
    </div> 
)}/> 

我怎么能输出category paramater的价值？即用什么代码替换{console.log(...)}中的...？

{console.log(props.match.params.category)} 

不工作，因为match未定义。

Answer 1

<Route path='/:category' render={({match: { params: { category } } }) => (
    <div> 
    {console.log(category)} 
    </div> 
)}/> 

Answer 2

试试这个

<Route exact path={"/:category"} render={(props) => (<div> 
     {console.log(props.match.params.category)} 
    </div>)}/> 

Answer 3

检查道具：

match.params.category

下面是一个例子

const Demo = ({ match }) => (
    <div> 
    <p>{match.path}</p> 
    <p>{match.url}</p> 
    <p>{match.params.category}</p> 
    </div> 
); 

而且也：Full example on codesandbox.io

Answer 4

试着这么做

<Route path="/:category" render={({match}) => (<div> 
     {match.params.category} 
</div>)} />