Javascript react语义用户界面和路由器有问题

以下是样本：

简单菜单/标题JSX：

<Menu fixed='top' inverted>
    <Container>
        <Menu.Item header>Simple Blog</Menu.Item>

        <Menu.Item name='home' as={Link} to='/'
                   active={this.state.activeItem === 'home'}
                   onClick={this.handleItemClick}>Home</Menu.Item>

        <Menu.Item name='create-p' as={Link} to='/create-post'
                   active={this.state.activeItem === 'create-p'}
                   onClick={this.handleItemClick}>Create post</Menu.Item>
    </Container>
</Menu>

简单博客
家
创建帖子

然后是基本index.js：

ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>

    <BrowserRouter>
        <div>
            <ApplicationMenu/>
            <Container style={{marginTop: '5em'}}>
                <Route exact path="/" component={Posts}/>
                <Route exact path="/home" component={CreatePost}/>
            </Container>
        </div>
    </BrowserRouter>
</Provider>
, document.querySelector('.start'));

ReactDOM.render(
，document.querySelector（'.start'）；

它呈现并看起来很好。当我点击其中一个菜单项时，我可以看到URL发生了变化，但除此之外没有采取任何行动。路由器不呈现新组件。如果我选择更改的URL并单击enter，它将呈现正确的URL，但看起来它不会对语义ui组件引发的URL更改做出反应

出于调试目的，我仅使用干净的html和css（纯sui，而不是react-one）对这些菜单项进行了原型化，并且效果良好

有没有人有过类似的问题并设法解决

---

谢谢您的回答。

这是反应路由器dom的常见问题

React的工作方式是每次都会重新启动：

• 组件的属性将发生更改
• 内部状态发生变化

如果更改页面的URL，则不会触发该组件的重新加载。因此，您的index.js将不会重新招标

这个问题的一个简单解决方案是用withRouter包装组件

因此，您的新索引应该如下所示：

import { withRouter } from 'react-router-dom';

ReactDOM.render(withRouter(
<Provider store={createStoreWithMiddleware(reducers)}>

    <BrowserRouter>
        <div>
            <ApplicationMenu/>
            <Container style={{marginTop: '5em'}}>
                <Route exact path="/" component={Posts}/>
                <Route exact path="/home" component={CreatePost}/>
            </Container>
        </div>
    </BrowserRouter>
</Provider>)
, document.querySelector('.start'));

从“react router dom”导入{withRouter}；
ReactDOM.render（使用路由器）(

如果您想了解有关此问题的更多信息，请阅读此GitHub问题：
您的路线
路径
与您的项目链接
不匹配

尝试将路线更改为：

<Switch>
 <Redirect exact path="/" to="/home">
 <Route exact path="/home/" component={Posts}/>
 <Route exact path="/create-post/" component={CreatePost}/>
</Switch>



顺便说一句：看看react router的
来代替
用于导航栏项目。
嘿，Larce，谢谢你的帮助。不幸的是，你的解决方案没有谨慎地工作，我应该提供一个组件实例而不是类。不过，你的解释给了我一些线索，最后让我从中找到Switch语句react router dom包。所以，如果我将路由打包到交换机中，它将按照我的预期工作。无论如何，谢谢：）