리액트 라우터는 새로고침 시 동작하지만 링크를 클릭할 때는 동작하지 않는다.

리액트 라우터는 새로고침 시 동작하지만 링크를 클릭할 때는 동작하지 않는다.

리액트를 셋업했습니다.react-router버전 4브라우저에서 직접 URL을 입력하면 라우팅이 동작하지만 링크를 클릭하면 브라우저에서 URL이 변경되지만(예를 들어 http://localhost:8080/categories) 내용은 업데이트되지 않습니다(단, 새로 고치면 업데이트됩니다).

설정은 다음과 같습니다.

Routes.js 의 설정은 다음과 같습니다.

import { Switch, Route } from 'react-router-dom';
import React from 'react';

// Components
import Categories from './containers/videos/Categories';
import Videos from './containers/videos/Videos';
import Home from './components/Home';

const routes = () => (
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/videos" component={Videos}/>
    <Route path="/categories" component={Categories}/>
  </Switch>
);

export default routes;

Nav.js에서 사용하는 링크는 다음과 같습니다.

<Link to="/videos">Videos</Link>
<Link to="/categories">Categories</Link>

App.js는 다음과 같습니다.

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav from './Nav';

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

당신의 컴포넌트를 조사해서 1개만 가지고 있는지 확인하겠습니다.<Router> ... </Router>또, 복수의 라우터를 사용하는 경우가 있는 것을 확인해 주세요만, 실수로 네스트 된 라우터가 있는 경우(해킹이 빨라서, 모든 장소에 이동할 때 라우터를 삭제하는 것을 잊어버렸기 때문에), 문제가 발생할 수 있습니다.

노력하겠습니다.

import {
  BrowserRouter as Router,
}  from 'react-router-dom'

// Other Imports

...

return (
  <Router>
    <div className="index">
      <Nav /> <!-- In this component you have <Links> -->
      <div className="container">
        <Routes />
      </div>
    </div>
  </Router>
);

최상위 컴포넌트(App.js).

컴포넌트 포장withRouter당신을 위해 일을 할 수 있을 겁니다. withRouter를 사용하는 컴포넌트에 필요합니다.Link또는 다른 것Router소품도 받지 못하고Router props에서 직접 오거나Route또는 에서Parent Component

라우터 프로포트는 다음과 같은 경우 컴포넌트에서 사용할 수 있습니다.

<Route component={App}/>

또는

<Route render={(props) => <App {...props}/>}/>

또는, 를 배치하는 경우는,LinksRouter의 직계 자녀로서

<Router>
     <Link path="/">Home</Link>
</Router>

라우터 내의 자 콘텐츠를 컴포넌트로 쓰고 싶은 경우, 다음과 같습니다.

<Router>
     <App/>
</Router>

Router 소품은 앱에서 사용할 수 없기 때문에 Route를 사용하여 호출을 전달할 수 있습니다.

<Router>
     <Route component={App}/>
</Router>

단, 라우터는 고도로 중첩된 구성요소에 라우터 소품을 제공하려는 경우 Handy로 제공됩니다.이 솔루션을 확인합니다.

import {withRouter} from 'react-router'

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default withRouter(AppComponent);

전체 앱에 Router가 하나만 있어야 합니다. 헤드 파일이 App.js일 경우 Router는 App.js 컴포넌트 전체를 랩해야 합니다.

나도 똑같은 문제를 겪고 있었지만, 내 원인은 훨씬 더 간단했다.

내 경우 URL 문자열 끝에 공백이 있습니다.

<Link to={ "/myentity/" + id + "/edit " } >Edit</Link>

링크를 클릭해도 작동하지 않지만 주소 표시줄에서 URL이 업데이트됩니다.브라우저 주소 표시줄을 탭하고enter그러면 키가 올바르게 동작합니다.

공간을 제거하면 다음과 같이 고정됩니다.

<Link to={ "/myentity/" + id + "/edit" } >Edit</Link>

꽤 뻔하긴 하지만 간과하기 쉽죠내가 눈치채기 전에 몇 가닥의 머리카락이 뽑혔고(그리고 분명히 나는 여기에 있게 되었다), 그것이 다른 누군가의 머리카락 몇 가닥을 살렸으면 좋겠다.

를 하고 있는 사람이 history및 ""를 하는 react-router v5 이 경우에는 할 도 있습니다.history로로로 4.10.1history패키지 개발자는 수정과 함께 새로운 릴리스를 발행합니다.글을 에서는 최신 인 as이 version of of of of as 。history는 「」입니다.v5.0.1버전보다 여부를 한 후 4.10.1

는 이 . 저는 아직 때문입니다.react-router★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

또는 이 저장되어 있는 네비게이션바를 랩하지 마십시오.

저도 예전에 같은 문제가 있었어요.메인 컴포넌트에만 사용해야 하는 navbar 컴포넌트를 안에 포장했습니다(App.js).

Hanly Nadackal의 대답은 내가 내 해결책을 찾은 곳이다.

「 」의되고 있는 바와 같이, 「 」에서는, 「 」를 참조하고 .history는 안 .react-router v5. https://github.com/remix-run/history/issues/893#issuecomment-905959905

history 집에서는package.json로로 합니다.^4.10.1문제를 해결했습니다.

라우터 내부에 Navbar 컴포넌트를 랩할 필요가 있는 Respect router dom v6

      <Router>
        <Nav />
        <Routes>
          <Route exact path="/" element={<LandingPage />} />
          <Route exact path="projects" element={<Projects />} />
          <Route exact path="about" element={<About />} />
          <Route exact path="blog" element={<Blog />} />
        </Routes>
      </Router>
      <Footer />

언급URL : https://stackoverflow.com/questions/44356360/react-router-work-on-reload-but-not-when-clicking-on-a-link