React Capital case in route

나는 아주 간단한 반응 애플 리케이션에서 일하고있다. 그러나 라우터를 사용할 때 항상 첫 번째 문자로 pathname을 만든다. Capital case와 나는 그 이유를 모른다.React Capital case in route

는

import React from "react"; 
import ReactDOM from "react-dom"; 
import Layout from "./pages/Layout" 
import Basket from "./pages/Basket" 
import { Router, Route, IndexRoute, hashHistory } from "react-router" 

const app = document.getElementById('app'); 

ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={Layout}> 
     <IndexRoute component={ItemsList}></IndexRoute> 
     <Route path="basket" name="basket" component={Basket}></Route> 
    </Route> 
    </Router>, 
app);

Header.js을 app.js

import React from "react"; 
import { Link } from "react-router" 

export default class Header extends React.Component { 
    render() { 
     const { location } = this.props; 
     const basketClass = location.pathname.match(/^\/basket/) ? "active" : ""; 
    return (
     <header> 
      <nav class="navbar navbar-default"> 
       <div class="container"> 
        <ul class="nav navbar-nav"> 
         <li class={inventoryListClass}><Link to="/">Inventory</Link></li> 
         <li class={basketClass}><Link to="basket">Basket</Link></li> 
        </ul> 
       </div> 
      </nav> 
     </header> 
    ); 
    } 
}

않는 사람이 지금은 대문자 I가 명시 적으로 "지정"/바스켓 "바구니를 사용하는 이유 "경로 매개 변수에.

감사합니다. 나는이 문제를 찾을 수 있도록

Layout.js

import React from "react"; 

import Footer from "./Footer"; 
import Header from "./Header"; 

export default class Layout extends React.Component { 

    render() { 
     const { location } = this.props 
     return (
      <div> 
       <Header location={location} /> 
       <div class="container"> 
        {this.props.children} 
       </div> 
       <Footer /> 
      </div> 
     ); 
    } 
}

출처

2016-08-06 Jakub Kohout

당신은 당신의 URL에'/ Basket' 경로를 대문자로 나타낼 수 있습니다. – 1ven

또한 경로 처리기가 아닌'Header' 구성 요소로부터'this.props.location' 속성을 얻으려고하는 이유가 확실하지 않습니다. 그것은'location' prop를 가져서는 안됩니다. 'Header'를 렌더링하는 구성 요소 코드를 제공 할 수 있습니까? – 1ven

이제 header 구성 요소를 렌더링하는 layout.js 구성 요소가 추가되었습니다. –

좋아. 나는 그래서 그냥 유형이었다 내 header.js

<li class={basketClass}><Link to="Basket">Basket</Link></li>

에 <link to=Basket이 줄 수도 자본 "B"를 넣어. 미안 해요.

출처

2016-08-06 12:07:06

활성 경로를 확인하지 않아도 마찬가지 방법으로 activeClassName="active"이 있습니다.

출처

2016-08-06 12:10:48 TemporaryName

React Capital case in route

답변

관련 문제