webentwicklung-frage-antwort-db.com.de

wie navigiere ich von einer Seite zur anderen in js reagieren?

Ich habe zwei Komponenten. In der ersten Komponente habe ich eine Taste. Mit einem Klick auf die Schaltfläche möchte ich zu einer anderen Komponente oder einer anderen Seite navigieren.

hier ist mein code http://codepen.io/naveennsit/pen/pymqPa?editors=1010

class App extends React.Component {
    handleClick(){
      alert('---');
    }

    render() {
        return <button onClick={this.handleClick}>hello</button>
    }
}

class Second extends React.Component {
    render() {
        return <label>second component</label>
    }
}

React.render( <App /> , document.getElementById('app'))
6
user5711656

Hier gibt es zwei Ansätze, beide ziemlich einfach.

Ansatz 1: Verwenden von React Router

Stellen Sie sicher, dass Sie die Route bereits in Ihrem Projekt eingerichtet haben. Es sollte mindestens diese Informationen enthalten: Pfad und Komponente. Es sollte ungefähr so ​​definiert sein:

import YourComponent from "./path/of/your/component"; 

<Route path="/insert/your/path/here" component={YourComponent} /> 

Als Nächstes möchten Sie Ihre handleClick -Funktion so aktualisieren, dass sie ein Link aus react-router-dom Verwendet (muss dieses Paket möglicherweise installieren, wenn Sie es noch nicht mit npm i react-router-dom).

Löschen Sie dies (Ihre handleClick -Funktion, die Sie mit Link nicht benötigen):

handleClick(){
  alert('---');
}
    render() {
        return <button onClick={this.handleClick}>hello</button>
    }

}

Ändern Sie nun Ihre Rendermethode wie folgt:

    render() {
        return (
          <div>
            <Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
         </div>
       ); 
    }

}

Geben Sie Link den gleichen Klassennamen wie Ihre Schaltfläche, damit sie als Schaltfläche und nicht als Ankertag dargestellt wird.

Alles zusammen.

// Überall wo dein Router mit deinen Routen ist

    import YourComponent from "./path/of/your/component";

    <Router>
      <Route exact path="/insert/your/path/here" component={YourComponent} />
    </Router>

// Die Komponente mit der handleClick-Funktion

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

class App extends Component {
  render() {
     return(
       <div>
         <Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
      </div>
     );
  }
}

Ansatz 2: Verwenden von window.open

Stellen Sie dennoch sicher, dass Sie die Route wie oben eingerichtet haben. Der Unterschied besteht darin, dass Sie Link nicht verwenden, was bedeutet, dass Sie Ihre handleClick -Funktion benötigen. Das wird das einzige sein, was sich ändert.

Ändere das:

handleClick(){
  alert('---');
}

dazu:

handleClick(){
  window.open("/insert/your/path/here");
  //this opens in a new tab (believe that is what the owner of the question wanted if not you can do window.location.href = "/insert/your/path/here". 
}

Das ist es. Wenn Sie Ihre Pfade dynamisch gestalten möchten, das heißt, sie enthalten Variablen wie IDs oder Namen usw. Siehe unten.

Dynamische Pfade

Dynamische Pfade können Namen und IDs oder beliebige Variablen enthalten. Sie müssen zuerst Ihre Route anpassen und dann Ihren Link oder Ihre Standorte entsprechend ändern.

Ändern Sie die Route zu diesem:

<Route path="/insert/your/path/here/:name" component={YourComponent} />

Beachten Sie den Doppelpunkt (:). Dadurch können Sie hier eine Zeichenfolge über eine Variable einfügen.

Aktualisieren Sie Ihren Link dazu:

<Link to={`/insert/your/path/here/${variableName}`}>hello</Link>

Und wenn Sie window.open Verwenden, aktualisieren Sie es wie folgt:

window.open(`/insert/your/path/here/${variableName}`); 

Ein paar Dinge, auf die Sie hier hinweisen sollten. Sie verwenden nach dem Gleichheitszeichen eckige Klammern, da dies React sagt, hey, ich muss hier eine Variable eingeben. Beachten Sie als nächstes die hinteren Häkchen. Dies sagt React=, dass Sie ein Zeichenkettenliteral verwenden, was bedeutet, dass Sie dies als Zeichenkette interpretieren sollen, aber zuerst den Wert meiner Variablen hier abrufen und in verwandeln eine Zeichenkette für mich. Und das $ {} ermöglicht es Ihnen, eine Variable zu platzieren, damit React) sie richtig interpretieren kann/your/path/here/valueOfVariablName "dann React prüft die Routen für diesen Pfad und sagt, dass wir etwas haben, das"/insert/your/path/here /: name "heißt, also: name muss gleich valueOfVariableName sein. Hoffe, das macht ein wenig Sinn. Sie können dynamische Pfade in Ihrer Konsole überprüfen. Protokollieren Sie Ihre Requisiten. Sie sollten ein Objekt sehen, das Standort, Verlauf usw. enthält.

Sie können auch mehr über React-Router lesen hier . Unformatierter Link: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

Wenn jemand eine bessere Ressource hat. Bitte zögern Sie nicht, meine Antwort zu bearbeiten oder einen Kommentar zu hinterlassen.

Ich hoffe das hilft jedem, der auf diese Frage stößt. Übrigens können Sie den Zustand auch durch das Link übergeben. Bitte stellen Sie eine weitere Frage, wenn Sie wissen möchten, wie das geht.

7
Bens Steves

Wenn Sie eine einzelne App erstellen möchten, würde ich die Verwendung von React Router vorschlagen. Ansonsten könnten Sie einfach Javascript verwenden:

window.location = 'newUrl';
6
Lars Graubner

Wir verwenden Link, um zu verschiedenen Routen zu navigieren, die vom reaktionsrouter gehostet oder geroutet werden.

class App extends React.Component {
    render(){
        return (
            <div>
                <BrowserRouter>
                    <div>
                    <Route path="/"  component={Landing} exact />
                    <Route path="/surveys" component={Dashboard}/>
                    </div>
                </BrowserRouter>

            </div>
        )
    }
}

für die beiden oben genannten Komponenten können Sie Link verwenden.

<Link to="/surveys">go to my surveys</Link>

Anchor-Tags werden jedoch verwendet, um zu völlig anderen HTML-Dokumenten zu navigieren. Wenn Sie sich beispielsweise bei Google Oauth anmelden möchten, müssen Sie zu einer anderen URL navigieren, wenn ein Benutzer auf die Schaltfläche "Mit Google anmelden" klickt.

<a href="/auth/google">Login with Google</a>
0
Yilmaz