Question

如何仅在提供特定路线时才应用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'时覆盖这些规则。我怎样才能做到这一点？

Answer 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组件指定listner：

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>

Answer 2

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

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

我不知道是否应该这样做，这看起来有点非法，但确实有效。

Answer 3

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

像这样：

 setInterval(()=> {
if(location == '/'){
..function
}
else if(location == '/about'){
..function
}
}, 1)

仅在特定路线时应用CSS

3 个答案: