Reactjs-reactルーターを使用してURLを変更しますが、コンポーネントは変更されません

ヴィシュワシャンカー

ログインページとサインアップページへのリンクを含むナビゲーションバーをレンダリングしたいのですが、クリックするたびにURLが希望どおりに変更されますが、それぞれのコンポーネントはレンダリングされません。これが私のコードです:

App.js

import React, { Component } from 'react';
import NavBar from './components/NavBar/NavBar';
import {BrowserRouter as Router,Route,withRouter} from "react-router-dom";
import Login from './components/Login';
import SignUp from './components/SignUp';
import Landing from './components/Landing';


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">

          <NavBar />
          <Route exact path="/" component={withRouter(Landing)} />
          <div className="container">
            <Route exact path="/login" component={withRouter(Login)} />
            <Route exact path="/signup" component={withRouter(SignUp)} />
          </div>
        </div>
      </Router>
    );
  }
}
export default App;

NavBar.js

import React,{Component} from "react";
import {BrowserRouter as Router,withRouter,Link} from "react-router-dom";
import './NavBar.css'



class NavBar extends Component {
    render() {
        return (
            <Router>
            <header className='navbar'>
                <nav className='navbar_navigation'>
                    <div />
                    <div className='navbar_logo'>
                        <Link to='/'>Home</Link>
                    </div>
                    <div className='navbar_nav-items'>
                        <ul>
                            <li><Link to="/signup" className="nav-link">Sign up</Link></li>
                            <li><Link to="/login" className="nav-link">Log In</Link></li>
                            <li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
                        </ul>
                    </div>
                </nav>
            </header>
            </Router>
        );
    }
}

export default withRouter(NavBar);

Landing、Login、Signupは基本的に、h2でテキストをレンダリングするコンポーネントです。これらが正常にレンダリングされるかどうかを確認したいからです。また、それぞれのURL(/ loginまたは/ signup)に直接アクセスしても、変更は見られず、これらのURLでレンダリングされるのはナビゲーションバーだけです。スイッチも追加してみましたが、何も変わらないようです。

Shubham Khatri

ここでの問題は、Navbarコンポーネントがそれ自体でルーターを使用しているため、リンクコンポーネントがRouterルートをレンダリングする外部コンポーネントと通信できないことです。ルーターコンポーネントインスタンスを1つだけ使用するようにしてください。

NavbarコンポーネントはRouterインスタンスを必要としません

class NavBar extends Component {
    render() {
        return (
            <header className='navbar'>
                <nav className='navbar_navigation'>
                    <div />
                    <div className='navbar_logo'>
                        <Link to='/'>Home</Link>
                    </div>
                    <div className='navbar_nav-items'>
                        <ul>
                            <li><Link to="/signup" className="nav-link">Sign up</Link></li>
                            <li><Link to="/login" className="nav-link">Log In</Link></li>
                            <li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
                        </ul>
                    </div>
                </nav>
            </header>
        );
    }
}

作業デモ

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

reactJsの親の状態を変更しても、reactの子コンポーネントの小道具は変更されません

分類Dev

reactjs-状態を変更してもコンポーネントは再レンダリングされません

分類Dev

ReactJsルーターはURLを変更しますが、ページは変更しません

分類Dev

コンポーネントがテキスト型の制御された入力を制御されないように変更しています-ReactJS

分類Dev

コンポーネントreactjsのonClick関数を変更しますか?

分類Dev

ReactJS:子コンポーネントの状態を変更します

分類Dev

Reactjs:警告:コンポーネントが制御対象を変更しています

分類Dev

ReactJSはデータベースの変更をチェックし、ブラウザを更新せずにコンポーネントを更新します

分類Dev

ReactJS - ネストされたルートに応じて親のコンポーネントを変更する

分類Dev

reactjsでpropが変更されるまでsetTimeoutを使用してコンポーネントを再レンダリングし続ける正しい方法は何ですか

分類Dev

ReactJSは子コンポーネントから親の状態を変更します

分類Dev

ボタンをクリックしてreactjsのコンポーネントを変更する

分類Dev

ReactJS-reactコンポーネントのスタイルとクラスを変更する方法は?

分類Dev

ReactJs子コンポーネントが小道具を介して更新されていません

分類Dev

ラジオボタンのラベルの境界線の色を変更します。スタイル付きコンポーネントとReactJS

分類Dev

ラジオボタンのラベルの境界線の色を変更します。スタイル付きコンポーネントとReactJS

分類Dev

親コンポーネントの状態が変更された後、子の状態がリセットされないようにします。すべての子コンポーネントの値も取得します。ReactJS+ Typescript

分類Dev

ReactJSは、親の再レンダリングの結果としてコンポーネントの小道具が変更されたときに状態を計算します

分類Dev

コンポーネントが、ReactJSで制御されるタイプチェックボックスの制御されていない入力を変更しています

分類Dev

コンポーネントは更新された状態のreactjsを受信していません

分類Dev

ReactJS:コンポーネントが使用されている場合にのみ.lessをロードします

分類Dev

コンポーネントがReactJSの制御されたエラーになるようにテキスト型の制御されていない入力を変更しています

分類Dev

状態は更新されていますが、コンポーネントは小道具内の更新された状態をReactjsの子コンポーネントに送信していません

分類Dev

Reactjsの状態変更は、動的に作成された子コンポーネントには反映されません

分類Dev

classNameを追加しますが、cssはReactJSコンポーネントに影響しません

分類Dev

Webpackエラー 'エラー:ReactJS.NETおよびMVC 5を使用してReactサーバー側コンポーネントをコンパイルしようとすると、ファイナルローダーがバッファーまたは文字列を返しませんでした'

分類Dev

子コンポーネントは、親から渡された初期値を設定しません:ReactJS

分類Dev

ReactJSは、クリックイベントによってコンテンツコンポーネントの配列を介してページコンテンツを変更します

分類Dev

ルートが変更されたコンポーネントをスワップアウトする場合のReactJSルーター+コンポーネント階層

Related 関連記事

  1. 1

    reactJsの親の状態を変更しても、reactの子コンポーネントの小道具は変更されません

  2. 2

    reactjs-状態を変更してもコンポーネントは再レンダリングされません

  3. 3

    ReactJsルーターはURLを変更しますが、ページは変更しません

  4. 4

    コンポーネントがテキスト型の制御された入力を制御されないように変更しています-ReactJS

  5. 5

    コンポーネントreactjsのonClick関数を変更しますか?

  6. 6

    ReactJS:子コンポーネントの状態を変更します

  7. 7

    Reactjs:警告:コンポーネントが制御対象を変更しています

  8. 8

    ReactJSはデータベースの変更をチェックし、ブラウザを更新せずにコンポーネントを更新します

  9. 9

    ReactJS - ネストされたルートに応じて親のコンポーネントを変更する

  10. 10

    reactjsでpropが変更されるまでsetTimeoutを使用してコンポーネントを再レンダリングし続ける正しい方法は何ですか

  11. 11

    ReactJSは子コンポーネントから親の状態を変更します

  12. 12

    ボタンをクリックしてreactjsのコンポーネントを変更する

  13. 13

    ReactJS-reactコンポーネントのスタイルとクラスを変更する方法は?

  14. 14

    ReactJs子コンポーネントが小道具を介して更新されていません

  15. 15

    ラジオボタンのラベルの境界線の色を変更します。スタイル付きコンポーネントとReactJS

  16. 16

    ラジオボタンのラベルの境界線の色を変更します。スタイル付きコンポーネントとReactJS

  17. 17

    親コンポーネントの状態が変更された後、子の状態がリセットされないようにします。すべての子コンポーネントの値も取得します。ReactJS+ Typescript

  18. 18

    ReactJSは、親の再レンダリングの結果としてコンポーネントの小道具が変更されたときに状態を計算します

  19. 19

    コンポーネントが、ReactJSで制御されるタイプチェックボックスの制御されていない入力を変更しています

  20. 20

    コンポーネントは更新された状態のreactjsを受信していません

  21. 21

    ReactJS:コンポーネントが使用されている場合にのみ.lessをロードします

  22. 22

    コンポーネントがReactJSの制御されたエラーになるようにテキスト型の制御されていない入力を変更しています

  23. 23

    状態は更新されていますが、コンポーネントは小道具内の更新された状態をReactjsの子コンポーネントに送信していません

  24. 24

    Reactjsの状態変更は、動的に作成された子コンポーネントには反映されません

  25. 25

    classNameを追加しますが、cssはReactJSコンポーネントに影響しません

  26. 26

    Webpackエラー 'エラー:ReactJS.NETおよびMVC 5を使用してReactサーバー側コンポーネントをコンパイルしようとすると、ファイナルローダーがバッファーまたは文字列を返しませんでした'

  27. 27

    子コンポーネントは、親から渡された初期値を設定しません:ReactJS

  28. 28

    ReactJSは、クリックイベントによってコンテンツコンポーネントの配列を介してページコンテンツを変更します

  29. 29

    ルートが変更されたコンポーネントをスワップアウトする場合のReactJSルーター+コンポーネント階層

ホットタグ

アーカイブ