J'utilise react router V6 et j'ai suivi ce tutoriel pour la configuration du routage: https://blog.logrocket.com/react-router-v6/ mais la vue ne sera pas mise à jour lorsque je clique sur les liens dans le menu de navigation.

La visite de localhost:3000/Crime rend le bon composant.
visitant localhost:3000 / rend le bon composant.

Mais en cliquant sur les liens, la vue ne sera pas mise à jour, contrairement au chemin de l'url.

GameComponent:

import React, { Component } from "react";
//import Component from 'react-dom';
import SideBarRight from "./components/game/sideBarRight.jsx";
import SideBarLeft from "./components/game/sideBarLeft.jsx";
import Crime from "./components/game/crime.jsx";

import "./gameComponent.css";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

class GameComponent extends Component {
  constructor() {
    super();
    this.state = { color: "red" };
  }

  render() {
    return (
      <div className="main">
        data testing:
        <Router>
          <nav style={{ margin: 10 }}>
            <Link to="/" style={{ padding: 5 }}>
              Home
            </Link>
            <Link to="/crime" style={{ padding: 5 }}>
              Crime
            </Link>
          </nav>
          <Route path="/" element={<SideBarRight />} />
          <Route path="/crime" element={<Crime />} />
        </Router>
      </div>
    );
  }
}

export default GameComponent;

Composant crime:

import React, { Component } from "react";
//import Component from 'react-dom';
import "./../../gameComponent.css";

class Crime extends Component {
  constructor() {
    super();
    this.state = {
      color: "red",
      user: {
        cash: 0,
        bank: 0,
        weapon: "",
        username: "test",
        locationname: "Bankok",
        defence: 0,
      },
      rankbar: { rankpercent: 50, rank: "Mafia" },
    };
  }

  render() {
    return <span>crimeday</span>;
  }
}

export default Crime;

Barre latérale :

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

class SideBarLeft extends Component {
  constructor() {
    super();
    this.state = { color: "red" };
  }

  render() {
    return (
      <div className="content_sidebar">
        <div className="header">
          <span>Computerbar1</span>
        </div>
        <BrowserRouter>
          <ul>
            <li>
              <Link to="/">Clear</Link>
            </li>
            <li>
              <Link to="/crime">Crime</Link>
            </li>
          </ul>
        </BrowserRouter>
      </div>
    );
  }
}

export default SideBarLeft;
1
Malin Pedersen 28 août 2020 à 10:19

3 réponses

Meilleure réponse

Pour react-router v5:

Utilisez Switch et exact:

<Switch>
  <Route exact path="/" element={<SideBarRight />} />
  <Route exact path="/crime" element={<Crime />} />
</Switch>

Switch rend le premier enfant Route ou Redirect qui correspond à l'emplacement. Et quand exact est true, la route ne correspondra que si le chemin correspond exactement au location.pathname.

Vous ne devez pas utiliser exact lorsque votre route a des routes enfants imbriquées, par exemple, si vous avez /crimes/summary ou /crimes/details etc. comme routes enfants à l'intérieur de /crimes.


Si vous utilisez react-router v6 < / strong>, comme expliqué ici, vous remplacez { {X0}} avec Routes et vous n'avez pas besoin d'utiliser exact car tous les <Route> chemins correspondent exactement par défaut:

<BrowserRouter>
  <nav style={{ margin: 10 }}>
    <Link to="/" style={{ padding: 5 }}>
      Home
    </Link>
    <Link to="/crime" style={{ padding: 5 }}>
      Crime
    </Link>
  </nav>
  <Routes>
    <Route path="/" element={<SideBarRight />} />
    <Route path="/crime" element={<Crime />} />
  </Routes>
</BrowserRouter>

De plus, vous n’avez pas besoin d’utiliser BrowserRouter plus d’une fois. Votre SideBarRight peut donc ressembler à:

function SideBarRight() {
  return (
    <div className="content_sidebar">
      <div className="header">
        <span>Computerbar1</span>
      </div>
      {/* <BrowserRouter> -> NOT REQUIRED */}
      <ul>
        <li>
          <Link to="/">Clear</Link>
        </li>
        <li>
          <Link to="/crime">Crime</Link>
        </li>
      </ul>
      {/* </BrowserRouter> */}
    </div>
  );
}
0
Ajeet Shah 28 août 2020 à 18:32

Tout d'abord, je suppose que vous utilisez la version V6 du routeur React ici, si c'était la version V5 stable, les solutions ci-dessus utilisant <Switch>, «exact» fonctionneraient parfaitement.

Les erreurs que je vois dans votre code sont:

  1. Dans GameComponent, entourez les chemins <Route> en utilisant <Routes> comme suit, sinon «/» correspondra à la fois à «/» et à «/ crime»
      <Routes>
           <Route path="/" element={<SideBarRight />} />
           <Route path="/crime" element={<Crime />} />
      </Routes>
  1. Supprimez <BrowserRouter> du composant <SideBarRight>, il ne doit être ajouté qu'une seule fois pour l'application
0
Mangly 28 août 2020 à 09:15

Vous pouvez essayer d'ajouter exact à votre Route comme ceci

<Route exact path="/" element={<SideBarRight />} />
<Route path="/crime" element={<Crime />} />

La raison étant que "/" et "/crime" commencent tous les deux par /, et sans le mot clé exact, React pense qu'ils sont tous les deux sur le même chemin.

EDIT: Plus d'informations sur exact ici https://reactrouter.com/web / api / Route / exact-bool

0
Alfred 28 août 2020 à 07:34