web-dev-qa-db-ja.com

Reactルーターはリロード時に動作しますが、リンクをクリックしたときは動作しません

React with react-router version 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;
reactjsreact-routerreact-reduxreact-router-reduxreact-router-v4
18
Suthan Bala

コンポーネントをwithRouterでラップすることで、作業を行うことができます。 withRouterは、Linkまたは他のRouter小道具を使用し、Routeから直接Router propsを受け取らないコンポーネントに必要です。 Parent Componentから

Router Propsは、次のように呼び出されたときにコンポーネントで使用できます。

<Route component={App}/>

または

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

またはLinksをRouterタグの直接の子として配置している場合

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

Router内の子コンテンツをコンポーネントとして記述したい場合、次のように

<Router>
     <App/>
</Router>

ルーターの小道具はアプリで利用できないため、次のようなルートを使用して呼び出しを渡すことができます

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

ただし、高度にネストされたコンポーネントにルーターの小道具を提供する場合は、withRouterが便利です。このソリューションを確認してください

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);
10
Shubham Khatri

コンポーネントを調べて、1つだけであることを確認します<Router> ... </Router>。また-<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）で。

3
Peege151

私はまったく同じ問題を抱えていましたが、私の原因はもっと簡単でした。

私の場合、URL文字列の最後にスペースがありました。

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

リンクをクリックしても機能しませんが、URLはアドレスバーで更新されます。ブラウザーのアドレスバーをタップしてenterキーを押すと、正しく動作します。

スペースを削除すると修正されました：

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

かなり明らかですが、見落としがちです。私が気づく前にいくつかの髪が引っ張られました（そして明らかに私はここに行き着きました）、それが他の誰かにいくつかの髪を救うことを願っています。

2
JoGoFo

アプリケーション（package.json）の依存関係にreact-routerをインストールしていないため、これに直面していました...

0
Gaspar

コンポーネントを含める順序は、index.jsファイル。 BrowserRouter、プロバイダー、そしてアプリ。

ReactDOM.render(
  <BrowserRouter>
      <Provider store={store}>
          <App />
      </Provider>
  </BrowserRouter>,
  document.getElementById('app')
);
0
Suthan Bala

おそらく2つのこと：

  1. インポートしましたか{ Link } from 'react-router-dom'あなたのNav.jsファイルに？

  2. スペル/大文字小文字の間違いの可能性：エクスポートexport default routes（小文字）がimport Routes from './../routes（大文字）。

0
sperfecto