React-router-dom 改变 URL 但不更新 styled-component 的 ThemeProvider 的内容

Question

你能帮我看看哪里出了问题吗？我正在使用 react-router-dom 并且当我尝试切换到某个页面时 -- URL 正在更新，但不是内容。如果我刷新页面 -- 内容没问题

这是我的演示： https://github.com/azat-io/react-router-dom-demo/blob/master/App.js

代码如下：

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
} from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, combineReducers } from 'redux'
import { render } from 'react-dom'
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'
import { normalize, selection } from 'polished'

import Home from 'containers/Home'
import Categories from 'containers/Categories'
import NotFound from 'containers/NotFound'

import theme from 'etc/theme'

const rootReducer = combineReducers({})

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ &&
  window.__REDUX_DEVTOOLS_EXTENSION__())

const GlobalStyle = createGlobalStyle`
  ${normalize()}
  ${({ theme }) => selection({
    background: theme.primaryColor,
    color: theme.primaryContrastColor,
  })}
  a {
    display: block;
  }
`

const Container = styled.div`
  display: block;
  min-height: 100%;
`

const App = () => (
  <Provider store={store}>
    <Router>
      <ThemeProvider theme={theme}>
        <Container>
          <GlobalStyle />
          <menu>
            <Link to={'/'}>
              { 'to home' }
            </Link>
            <Link to={'/categories'}>
              { 'to categories' }
            </Link>
          </menu>
          <Switch>
            <Route exact path={'/'} component={Home} />
            <Route path={'/categories'} component={Categories} />
            <Route component={NotFound} />
          </Switch>
        </Container>
      </ThemeProvider>
    </Router>
  </Provider>
)

render(<App />, document.getElementById('app'))

Answer 1

您的 Container 组件未更新其子组件。所以问题来自styled-components。

一个可行的解决方案是将 <Router> 包裹在您的 <Container> 中，而不是相反......像这样：

const App = () => (
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <Container>
        <Router>
        <React.Fragment>
          <GlobalStyle />
          <menu>
            <Link to={"/"}>{"to home"}</Link>
            <Link to={"/categories"}>{"to categories"}</Link>
          </menu>
          <Switch>
            <Route exact path={"/"} component={Home} />
            <Route path={"/categories"} component={Categories} />
            <Route component={NotFound} />
          </Switch>
        </React.Fragment>
        </Router>
      </Container>
    </ThemeProvider>
  </Provider>
);

另一种解决方案（未经测试）是使用 styled('div') 而不是 styled.div 并保持其余代码不变。

或者要尝试的另一件事（未经测试）是将 <Container> 替换为 <ContainerWrapper>，这是它的代码：const ContainerWrapper = props => <Container>{props.children}</Container> 这样做的原因是有一个无状态的功能，我们确信它会在路由更改时更新。

请随时告诉我哪个最有效，以便调整此答案以供将来参考。

React-router-dom 改变 URL 但不更新 styled-component 的 ThemeProvider 的内容

React-router-dom changing URL but not updating content of styled-component's ThemeProvider

reactjs

react-router

react-router-dom