Css 反应路由器链接整个（内联）块而不仅仅是文本？

我正在实现一个简单的React组件（），但添加了React路由器，以便单击导航菜单激活不同的路由。我让它几乎正常工作：单击按钮的文本会将您带到不同的路线，但单击

内联块中的其他位置只会更改样式（激活
class=“active”
），但不会更改路线（单击
onClick
侦听器位于
li
标记上）

如下所示，您可以单击
Services
文本来激活服务路由，但如果您在
About
块中单击，但不在块本身的文本上单击，则它将
About
注册为活动，但不会更改路由


以下是React和my css中的相关代码：

类导航扩展了React.Component{

constructor() {
    super()
    this.state = {chosenIndex: 0, tabs: ['Home', 'Services', 'About', 'Contact us']}
    this.selectTab = this.selectTab.bind(this)
}

selectTab(e, i) {
    e.preventDefault()
    this.setState({chosenIndex: i})
}

render() {
        let buttons = this.state.tabs.map((tab, index) => {
            return (
                <li key={index} className={index === this.state.chosenIndex ? 'active' : 'inactive'} onClick={event => this.selectTab(event, index)}><Link to={nameToPath(tab)}>{tab}</Link></li>
            )
        })
        return (
            <BrowserRouter>
                <div>
                    <ul>
                        {buttons}
                    </ul>
                    <Match exactly pattern="/" component={Home} />
              <Match pattern="/services" component={Services} />
              <Match pattern="/about" component={About} />
              <Match pattern="/contactus" component={ContactUs} />
              <Miss component={Home} />
            </div>
            </BrowserRouter>
        )
    }

应该足够简单，可以通过在
CSS中添加
display:block
来修复CSS

我不知道整个集装箱标签，但您只需在文本或您应用的文本中添加
填充：relative
。
并没有进行充分调查，但我非常确定此页面包含了这类内容所需的所有内容：请包含您的
选择选项卡
功能代码。I a我不确定你说的是在页面之间导航还是只突出显示应用程序中的选项卡。@PaulS我刚刚将其添加到问题中。现在单击选项卡而不是文本只会更改突出显示；导航只在单击文本本身时发生。如果单击应用程序中的任何位置，我希望它能够导航vigation“box.”我确实在
a{}
中有
display:block；
，但它仍然不能解决问题…嗯，我必须仔细看看这个。如果我发现有其他问题，就会更新。这完全解决了！
html{
    font:24px normal Arial, sans-serif;
    color:#626771;
    background-color:#fff;
}

body{
    padding:60px;
    text-align: center;
}

ul{
    list-style:none;
    display: inline-block;
}

ul li{
    display: inline-block;
    padding: 10px 20px;
    cursor:pointer;
    background-color:#eee;
    text-decoration: none;
    color:#7B8585;
    transition:0.3s;
    font: bold 14px Arial;
}

ul li:hover {
    background-color:#beecea;
}

ul li.active {
    background-color:#41c7c2;
}

a {
    text-decoration: none;
    color: #7b8585;
    display: block;
}

ul li.active a {
    color: #fff;
}

p {
    padding-top:15px;
    font-size:16px;
}