React-router-dom更改URL但不更新样式组件的ThemeProvider的内容

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-router-dom更改URL但不更新样式组件的ThemeProvider的内容相关的知识,希望对你有一定的参考价值。

你能帮我说出什么是错的吗?我正在使用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'))
答案

您的Container组件未更新其子项。所以问题来自样式组件。

一个有效的解决方案是将<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>
);

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

或者还有一件事(未经测试)尝试用<Container>替换<ContainerWrapper>,这里是它的代码:const ContainerWrapper = props => <Container>{props.children}</Container>这样做的原因是有一个无状态函数,我们确信它会更改路由更改。

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

另一答案

Router组件和react-router-dom并不像你想象的那么灵活,但他们无论如何都非常有用。

Router不喜欢里面的“太多的东西”,对于我自己,我不使用Link组件。

无论如何,这是一个基本的例子:

import React from "react"
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom"
import { render } from "react-dom"

const Home = () => <p>Home</p>
const Categories = () => <p>Categories</p>
const NotFound = () => <p>NotFound</p>

const App = props =>
  <div>
    App container
   {props.children}
  </div>


const Header = () => 
  <div>
    Menu
    <ul>
      <li><Link to='/'>Home</Link></li>
      <li><Link to='/categories'>Categories</Link></li>
    </ul>
  </div>

render(
  <App>
    <Router>
      <div>
        <Header/>
        <Switch>
          <Route exact path={'/'} component={Home} />
          <Route path={'/categories'} component={Categories} />
          <Route component={NotFound} />
        </Switch>    
      </div>
    </Router>
  </App>,
  document.getElementById("root")
)

Check this example out for more

Code of the above post is here

以上是关于React-router-dom更改URL但不更新样式组件的ThemeProvider的内容的主要内容,如果未能解决你的问题,请参考以下文章

react-router-dom 仅更改 url

React:react-router-dom Redirect 不是重新加载页面,而是更改 URL

react-router-dom之 history+路由url更新页面不刷新的解决办法

无法导航到 react-router-dom URL

React 路由器更改 url 但不更改页面加载

如何使用 react-router-dom 卸载路由更改上的组件而不是重新渲染 [重复]