특정 경로에만 CSS 적용

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에서 나는 경로 '/life'가 제공되는 경우에만 무시하려는 인스턴스에 대한 body에 대한 몇 가지 규칙이있다. 이것을 어떻게 할 수 있습니까?

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 
} 

편집 : 주석 질문에 따른

당신은 응용 프로그램 구성 요소, 예를 들어 청취자를 지정할 수 있습니다

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>