리액트 링크 vs 태그 및 화살표 기능

리액트 링크 vs 태그 및 화살표 기능

리액트 라우터를 시작한 지 얼마 안 됐어요

두 가지 질문이 있습니다.를 사용하는 것의 차이점은 무엇입니까?<Link to="/page"> ★★★★★★★★★★★★★★★★★」<a href="page">둘 다 , 하다, 하다, 하다에게./page '오류'를 요.<a href="page">하지만 내가 그것을 사용할 때는 작동한다.<Link to="/page">을 사용하다둘 다 정확히 같은 url로 렌더링하는 것을 알고 있는데 어떻게 차이가 날 수 있을까요?

두 번째로는 리액트라우터 v4 매뉴얼에 기재되어 있는 이상한 화살표 기능입니다.

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

는 알고 있다() => {}이것들은 ES6에서는 처음이지만, 괄호 대신 일반 괄호 안에 있는 것은 없습니다.뭐??

편집

my index.js 클래스(모든 Import를 가지고 있습니다)

render((
    <Router>
        <div>
            <Route component={App}/>
        </div>
    </Router>
), document.getElementById('root')
);

My App.js 클래스

class App extends Component {
render() {
    return (
        <div className="container">
            <header>
                <span className="icn-logo"><i className="material-icons">code</i></span>
                <ul className="main-nav">
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/teachers">Teachers</Link></li>
                    <li><Link to="/courses">Courses</Link></li>
                </ul>
            </header>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/teachers" component={Teachers}/>
            <Route path="/courses" component={Course}/>
        </div>
    );
}
}

export default App;

에러가 발생하고 있습니다. Cannot GET /about로 localhost:8080/about 을 하면, 「」가 표시됩니다about합니다./about하게 표현한다.

이것은 당신의 문제를 해결하기에는 다소 늦은 것일 수 있으며, 당신은 그것을 잘 알고 있을 것이다.하지만 제 생각은 이렇습니다.

첫 번째:

를 사용하는 것의 차이점은 무엇입니까?<Link to="/page"> ★★★★★★★★★★★★★★★★★」<a href="page">

• 겉으로는 사과와 오렌지를 비교하시는 것 같네요.이지만, 「」의 는 상대 패스입니다.Link하지 않는다react-router을 참조해 주세요.가 생기게 ./blah의 「」를 합니다.Link로 가다/page<a href='page' /> ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ로 합니다./blah/page 않을 수 해 주십시오.url 의 、 의 、 의 、 의 、 의만 、 만만 、 만만 、 만 . 、 의 . 、 의 . . 。
• answer(및)에 더 는 @Dennis answer(「」 「」 「」)와 일치하는 루트에 입니다.Link가리키고 있습니다.현재 가동 중이라고 가정합니다./page 및Link/page또는 심지어/page/:id이 조작을 실시해도, 이 조작에 의해서 페이지 전체가 갱신되는 일은 없습니다.<a />태그는 자연스럽게 붙습니다.Github의 문제를 참조하십시오.

은 '어느 쪽인가'에 이었습니다.state에 을 입력합니다.<Link to={{pathname: "/page", state: "desiredState"}}>Page</Link> 대상 컴포넌트: 상상'''''''((((((((((((((((((''''''')에서 확인할 수 있습니다<Page />componentWillReceiveProps다음과 같이 합니다.

componentWillReceiveProps(nextProps){
  if (nextProps.location.state === 'desiredState') {
    // do stuffs
  }
}

두 번째 질문:

리액트 라우터 v4 설명서의 이상한 화살표 기능...괄호 말고는 일반 괄호 안에 아무것도 없어요.뭐야?

화살표 기능은 @Dennis와 @Jaromanda X가 대응했습니다.단, 3비트를 추가해야 합니다.

• ★★★★★★★★★★★★★★★가 있는 경우() => blah 괄호 {}「 」의 뒤에 => 경우blah 할 return츠키노 ★★★★★★★★★★★★★★★★★.() => blah 그렇고)와입니다.() => (blah)예요.() => { return blah } and() => { blah }.
• 「」를 는, ?{ blah: blah }@Jaromanda X세. 다음 '하다, 하다, 하다'를 해야 요.() => ({ blah: blah }) 간단히 말해서() => ({ blah })과 같이 할 수 .() => { return { blah: blah } }.
• 세 번째 비트는 MDN을 가리키는 것입니다.

도움이 됐으면 좋겠다.

href 속성은 페이지 새로 고침을 트리거하여 응용 프로그램 상태를 리셋합니다.그러나 리액트 라우터의 링크와 네비게이션링크는 페이지 새로고침을 트리거하지 않습니다.React는 대부분의 경우 단일 페이지 응용 프로그램을 작성하기 위해 사용되므로 라우팅 작업 시 [Link]또는 [Navlink]를 선택해야 합니다.

컴포넌트를 사용하면 일반 링크 요소보다 더 많은 작업을 수행할 수 있습니다.예를 들어 React 컴포넌트이기 때문에 상태를 유지할 수 있는 이점이 있습니다(원하는 경우).여기서 더 많은 문서를 볼 수 있습니다.오류가 없으면 무슨 일이 일어날지 모르겠지만 라우팅 라이브러리가 일반적인 html 요소보다 컴포넌트를 사용하길 원하는 것 같습니다.

★★★에 () => {}이것은 익명 함수 또는 람다 식이라고 하는 구성입니다.함수를 하는 것과 .var x = function(){ return (<div>...) };괄호 안에 것이 '아까운 것이 있다'라는입니다.const x = (y) => return y*2;React에서 실행되는 이유는 기능 범위를 해당 컴포넌트에 노출시키기 위해서입니다.

코드 소스를 보는 것보다 더 좋은 것은 없다.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js

?Link내부적으로 이력을 사용하는 컴포넌트입니다.리액트 라우터의 역사와 네비게이션 뒤에 있는 모듈|라이브러리입니다.또한 다양한 모드(메모리 이력, browser History, hash History)가 제공됩니다.커스텀도 가능합니다).

마찬가지로 앵커 태그를 렌더링하지만 기본 동작은 덮어씁니다(prevent Default()).그냥 div만 썼을 수도 있어하지만 완전히 옳은 건 아니야이유는 다음과 같습니다.

기본적으로 다음과 같이 동작합니다.

아래의 상태를 관찰합니다.

  if (
          !event.defaultPrevented && // onClick prevented default
          event.button === 0 && // ignore everything but left clicks
          (!this.props.target || this.props.target === "_self") && // let browser handle "target=_blank" etc.
          !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {

}

상기의 조건을 만족하는 경우.이력을 사용합니다(푸시 또는 교체).그렇지 않으면 브라우저가 정상적으로 동작합니다.그래서 그런 경우에는 그냥 일반적인 앵커 태그일 겁니다.<a />가 targetblank를 처리하도록 브==='''='========'blank'입니다.상태가 잘 설명되고 있다.기록 객체의 유형에 따라 달라집니다.작이바바 바바바다다의 이 아니라 '자신'의 입니다.하다, 하다, 이이이이 이이이 이이 다이다다다

이력서:

<Link />는 컴포넌트이며, 컴포넌트를 .<a />, 이 방지되어 있습니다da, default 동작).preventDefault()을 이력 오브젝트 「」 「」 「」 「」 「」)에할 수 onClick하고 있는가.어떤 반응 라우터의 내비게이션에 기초하는지.그리고 위에 언급한 몇 가지 조건에 대해서.이치노그리고 그냥 정확하게<a /> 태그(no 「no」 「no」)preventDefault()를 참조해 주세요.

용도를 위해서.리액트 라우터를 사용하는 경우. 그냥 쓰면 요.Link.

언급URL : https://stackoverflow.com/questions/43087007/react-link-vs-a-tag-and-arrow-function