react-semantic-ui 和路由器遇到问题答案

【问题标题】：Having troubles with react-semantic-ui and routerreact-semantic-ui 和路由器遇到问题
【发布时间】：2018-02-26 14:48:54
【问题描述】：

示例如下：

简单的菜单/标题 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'));

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

出于调试目的，我仅使用干净的 html 和 css（纯 sui，而不是 react one）对这些菜单项进行了原型设计，并且它起作用了。

有没有人遇到过类似的问题并设法解决了？

感谢您的任何回答。

【问题讨论】：

标签： javascript reactjs semantic-ui semantic-ui-react

【解决方案1】：

这是 react-router-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'));

现在，当 URL 发生变化时，高阶组件“withRouter”会注意到它并重新渲染其中的组件，因此您的正确组件将被渲染。

如此处所述：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

如果您想了解有关该问题的更多信息，请阅读此 GitHub 问题：https://github.com/ReactTraining/react-router/issues/5037

【讨论】：

嘿拉尔斯，谢谢你的帮助。不幸的是，您的解决方案没有谨慎工作，我应该提供一个组件实例而不是一个类。但是，您的解释为我指明了一些方向，最后让我从 react-router-dom 包中找到 Switch 语句。因此，如果我将路由包装到 Switch 中，它会按我的预期工作。无论如何谢谢:)

【解决方案2】：

您的路线path 与您的物品链接to 不匹配。

尝试将路线更改为：

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

顺便说一句：查看 react-router 的 <NavLink> 以代替 <Link> 用于您的导航栏项目。

【讨论】：