Question

所以继承样本：

简单的菜单/标题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并单击回车，则会呈现正确的URL，但看起来它对由语义ui组件引发的URL更改没有反应。

出于调试目的，我使用干净的html和css（纯粹的sui，没有反应）对这些菜单项进行原型设计并且它有效。

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

感谢您的回答。

Answer 1

这是react-router-dom的常见问题。

React以每次重新渲染的方式工作：

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

如果更改页面的URL，则不会触发该组件的重新呈现。因此，您的index.js不会被重新渲染。

解决此问题的一个简单方法是使用withRouter包装Component。

所以你的新索引应如下所示：

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发生变化时，更高阶的组件＆＃34; withRouter＆＃34;注意它并重新渲染其中的组件，因此将呈现正确的组件。

如此处所述：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

Answer 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>用于您的Navbar项目。

使用react-semantic-ui和路由器遇到麻烦

2 个答案: