在React路由器中获取路由参数

Question

在以下代码段

中

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

如何输出category参数的值？即，我需要用什么代码替换...中的{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

尝试类似

的内容

var myDict = [String : [Client]]()