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:react-router-dom Redirect 不是重新加载页面,而是更改 URL