0
votes

Comment rediriger vers des pages intérieures et externes de ReactJS

Je suis nouveau pour réagir et essayer d'acheminer l'utilisateur à une nouvelle page (à l'intérieur et à l'extérieur) si une certaine condition n'est pas remplie. Mon extrait ci-dessous fonctionne mais je ne suis pas convaincu que c'est la bonne approche.

Pourriez-vous jeter un coup d'œil et laissez-moi savoir s'il y a un moyen plus efficace de le faire. Je souhaite rediriger automatiquement l'utilisateur lorsque l'URL n'a pas d'argument ni d'argument invalide.

merci xxx

reactjs next.js

1 commentaires

Quelle est la version de NEXTJS que vous utilisez?

3 Réponses :

0
votes

Vous pouvez essayer d'utiliser réact-routeur . réacteur-routeur code>. Essayez si cela fonctionne

   render() {
       <Switch>
           {/* take URL path as a condition to go to which page */}
           <Route path='/:city/:state' component={YourPageComponent}/>
           <Route path='/' component={/* put your default component here */}/>
        </Switch>
    }

1 commentaires

vérifier ma réponse modifiée :)

0
votes

Vous pouvez utiliser réacteur-routeur-dom strong>. Exemple de https://reacttraining.com/react-router/web/guides/ Quick-Démarrage :

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

0 commentaires

0
votes

Je vous suggère d'utiliser React-Router-Dom. Une fois que vous avez configuré le routeur en haut de votre application, vous pouvez utiliser les méthodes de routeur dans vos composants enfants.

export default class extends Component {
  static getInitialProps({ query: { city, state } }) {
    return { city: city, state: state };
  }

  componentDidMount() { 
    if (!this.props.city) {
       this.props.history.push('to your route')
    } else {
        if (this.props.city === "augusta") {
          window.location = 'https://www.google.com'
        }
    }
   }

 render() {
     if (!this.props.city ||this.props.city === "augusta"){
       return null
     }else{
        return(
           <div>...</div>
        )
     }

  }
}

2 commentaires

J'utilise NextJs. Donc, ce fichier est implicitement acheminé à partir du dossier Pages.

Vous avez étiqueté votre problème avec ReactJS