web-dev-qa-db-fra.com

Qu'est-ce que le routage dynamique dans ReactJS?

J'ai parcouru Internet sur le routage dynamique de React. Mais je n'ai rien trouvé qui explique comment cela fonctionne et comment il est différent du routage statique dans tous les sens.

J'ai bien compris comment les choses se passent lorsque nous voulons rendre quelque chose sur la même page en utilisant React-Route.

Ma question est de savoir comment cela fonctionne quand une nouvelle page entière est désirée pour être rendue? Parce que dans ce cas, tous les DOM à l'intérieur de cette page doivent être restitués. Serait-ce donc un routage statique? ou encore dynamique à certains égards?

J'espère avoir été clair. Merci pour les réponses à l'avance, j'apprécie!

reactjsroutingreact-router
11
Red fx

Je ne pense pas que l'explication ci-dessus soit correcte pour Statique vs Dynamique Il n'y a pas non plus beaucoup d'explications sur le Web, mais il y a une très belle explication dans React Router Docs. From the Docs

Si vous avez utilisé Rails, Express, Ember, Angular etc. vous avez utilisé le routage statique. Dans ces cadres, vous déclarez vos itinéraires dans le cadre de l'initialisation de votre application avant tout rendu. React Router pre-v4 était également statique (principalement). Voyons comment configurer les routes en express:

Dans le routage statique, les routes sont déclarées et importées au niveau supérieur avant le rendu .

Alors que dans le routage dynamique

Lorsque nous parlons de routage dynamique, nous entendons le routage qui a lieu pendant le rendu de votre application, pas dans une configuration ou une convention en dehors d'une application en cours d'exécution.

Ainsi, dans le routage dynamique, le routage a lieu pendant le rendu de l'application . Les exemples expliqués dans la réponse ci-dessus concernent tous deux le routage statique.

Pour le routage dynamique, cela ressemble plus à

const App = () => (
    <BrowserRouter>
        {/* here's a div */}
        <div>
        {/* here's a Route */}
        <Route path="/tacos" component={Tacos}/>
        </div>
    </BrowserRouter>
)

// when the url matches `/tacos` this component renders
const Tacos  = ({ match }) => (
    // here's a nested div
    <div>
        {/* here's a nested Route,
            match.url helps us make a relative path */}
        <Route
        path={match.url + '/carnitas'}
        component={Carnitas}
        />
    </div>
)

Premier composant App , une seule route est déclarée /tacos. Lorsque l'utilisateur accède à /tacos le composant Tacos est monté et là la route suivante est définie /carnitas. Ainsi, lorsque l'utilisateur accède à /tacos/carnitas, le composant Carnitas est monté, etc.

Ici, les routes sont initialisées dynamiquement.

24
pritesh

Utilisez react-router et react-router-dom, et écrivez quelque chose comme ceci:

onSubmit((e) => {
e.preventDefault();
this.props.history.Push('<url>')
}

donc à tout endroit, vous pouvez exécuter cette ligne et aller à un autre emplacement conditionnellement

0
AlexNikonov