React-router-dom изменяет URL, но не обновляет содержимое ThemeProvider стилевого компонента - PullRequest
Новая
       5

React-router-dom изменяет URL, но не обновляет содержимое ThemeProvider стилевого компонента

0 голосов
/ 22 сентября 2018

Не могли бы вы помочь мне сказать, что не так.Я использую 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'))

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

Ваш Container компонент не обновляется.Так что проблема исходит от styled-компонентов.

Рабочее решение состоит в том, чтобы обернуть <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> Причиной этого является наличие функции без сохранения состояния, которая, как мы уверены, обновляется при изменении маршрута.

Не стесняйтесь, дайте мне знать, какой метод лучше всего подходит для корректировки этого ответа для дальнейшего использования.

0 голосов
/ 22 сентября 2018

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")
)

Проверьте этот пример, чтобы узнать больше

Код вышеуказанного поста здесь

...