web-dev-qa-db-ja.com

Reactルーターまたはリンクが機能しない

Reduxアプリでreact-router-domを使用しています。

これはindex.jsでの私の初期設定です：

ReactDOM.render(

  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>

  , document.getElementById('root'));

それから私のApp.jsに私は持っています：

render() {
    return (
      <div className="App">
        <Route exact path="/" render={ () => {
          return (
              <div>
                {
                  this.props.categories.map((category)=>{
                    console.log('category', category)
                    return (
                          <Link key={category.name} to="/category"  >{category.name}</Link>
                    )
                  })
                }
              </div>
          )

          }}
        />

        <Route path="/category" render={ () => {
          console.log('category path this.props', this.props)
          return (<p>Category is whatever</p>)
        }}
        />

      </div>
    );
  }

表示されたリンクのいずれかをクリックするたびに、ブラウザは新しいルートパス/カテゴリをレンダリングする方法を自動的に認識していると思いますが、何らかの理由で認識していません。

私は何が間違っているのですか？

reactjsreact-reduxreact-router-reduxreact-router-dom
4
preston

デーンによる上記の投稿には解決策があります。しかし、ソリューションをより明確に提示するという精神で、reactルーターがreduxや他のミドルウェアでうまく機能するようにした関連コードをコピーして貼り付けます。

import { withRouter } from 'react-router-dom'



export default withRouter(connect(
  mapStateToProps,
)(App))
13
preston

Reactルータードキュメント、

通常、ReactルーターとReduxは正常に連携します。ただし、場所が変更されても更新されないコンポーネントがアプリに含まれる場合があります（子ルートまたはアクティブなナビゲーションリンクは更新されません）。 。これは次の場合に発生します。

  1. コンポーネントはconnect（）（Comp）を介してreduxに接続されています。
  2. コンポーネントはnot「ルートコンポーネント」です。つまり、次のようにレンダリングされません。<Route component={SomeConnectedThing}/>

問題は、ReduxがshouldComponentUpdateを実装しており、ルーターから小道具を受信して​​いない場合、何かが変更されたという兆候がないことです。これは簡単に修正できます。コンポーネントを接続する場所を見つけて、withRouterでラップします。

したがって、render小道具の使用に問題がある可能性があります。そう：

  1. renderをcomponentに置き換えるか、
  2. withRouterを使用してソリューションを試してください（コンポーネントにする必要があります）

https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates

6
Dane

私の場合、これは正しく機能しています。ルーターをインポートし、両方をリンクする場合。

import { BrowserRouter as Router, Link } from "react-router-dom";
2
Sagarika Pillay

リンクとルーターの両方が必須です。

うまくいかない！

import { BrowserRouter as Link } from "react-router-dom";

私の場合はうまくいきます。

import { BrowserRouter as Router, Link } from "react-router-dom";
1
Ankit Kumar Rajpoot