仅在针对特定路线时应用 CSS

Posted 2023-02-21

【中文标题】仅在针对特定路线时应用 CSS

【英文标题】：Apply CSS only when for specific route

【发布时间】：2017-10-20 17:41:31

【问题描述】：

如何仅在提供特定路线时应用 CSS 规则？

import React from 'react'
import ReactDOM from 'react-dom'
import registerServiceWorker from './registerServiceWorker'
import './styles/index.css'
import 
  Route, Switch, BrowserRouter as Router
 from 'react-router-dom'
import App from './components/App'
import Life from './components/Life'

ReactDOM.render(
    <Router>
        <Switch>
            <Route exact path="/life" component=Life />
            <Route path="/" component=App />
        </Switch>
    </Router>
    , document.getElementById('root'));
registerServiceWorker();

在./styles/index.css 中，我有一些body 的规则，例如，我只想在路由'/life' 提供服务时覆盖这些规则。我怎样才能做到这一点？

【参考方案1】：

您可以在需要时根据当前路由添加特定的 css 类：

.tagClass 
  width: 1200px;

class App extends Component 
  render() 
    let tagPath = '/life' == this.context.location.pathname
    return (
      <div className=tagPath?'tagClass':'' />
    )
  


App.contextTypes = 
    router: React.PropTypes.object,
    location: React.PropTypes.object

编辑：根据评论问题

您可以为 App 组件指定监听器：

componentDidMount() 
    this.context.router.getLocation().addChangeListener(listener);

componentWillUnmount() 
    this.context.router.getLocation().removeChangeListener(listener);

或每个路由处理程序：

function handler() 
  do something;


<Route path='/' component=App>
  <Route path="foo" component=Foo onEnter=handler/>
  <Route path="life" component=Life onEnter=handler/>
</Route>

【讨论】：

谢谢，但我想更改不在组件中而是在公共文件夹中的正文。

据我所知，react 无法访问正文。但是你可以用纯js手动完成。

【参考方案2】：

所以，显然你可以在 React 组件中使用 require()。 这意味着您可以在您的函数/类内部或直接在 import 语句下的组件外部执行类似的操作：

if (window?.location.pathname === '/life')
    require('./styles/index.css')

我不知道是否应该这样做，这似乎有点违法，但它确实有效。

【讨论】：

感谢@drinking-code 你在这里救了我的命

【参考方案3】：

可以在index.html文件的script标签中添加setInterval。

像这样：

 setInterval(()=> 
if(location == '/')
..function

else if(location == '/about')
..function

, 1)