web-dev-qa-db-fra.com

Détecter les modifications dans le paramètre de requête react-router-dom v4.x et rendre le composant à nouveau

Je ne sais pas trop pourquoi il affiche la route par défaut une fois que j'ai modifié la requête. Existe-t-il une meilleure approche pour ce genre de problème? peut-être que je ne devrais pas utiliser le paramètre de requête? Ouvrez-vous pour être instruit!

Version "React": "^ 16.2.0", "React-dom": "^ 16.2.0", "React-router": "^ 4.2.0", "react-router-dom": "^ 4.2.2",

Test Case https://codepen.io/adamchenwei/pen/YeJBxY?editors=0011

Étapes à suivre pour reproduireCliquez sur Accueil -> Étape 1

Comportement attendu Passez à l’étape 1 ainsi qu’à l’étape 2: restituer correctement

Comportement actuel Vide, rien ne s'affiche sur la page.

// For this demo, we are using the UMD build of react-router-dom
const {
  BrowserRouter,
  Switch,
  Route,
  Link
} = ReactRouterDOM

const {
  Component,
} = React;

const Router = BrowserRouter;

const Step1View = () => (
  <div>
    <h1> Step 1</h1>
  </div>
)

const Step2View = () => (
  <div>
    <h1> Step 2</h1>
  </div>
)

class Home extends Component {
  constructor(props) {
    super(props);
    console.log('-!!!')
    this.state = {
      step: 1,
    }
    this.next = this.next.bind(this);
  }

  next(stepNumber=1) {
    this.props.history.Push({
      pathname: `/adamchenwei/pen/YeJBxY?editors=0011/?step=${stepNumber}`,
    });
    const query = this.props.history.location.pathname;
    console.log('---aaaaa');
    console.log(query);
    if (query === '/adamchenwei/pen/YeJBxY?editors=0011/?step=1') {
      this.setState({
        step: 1,
      })
    } else if (query === '/adamchenwei/pen/YeJBxY?editors=0011/?step=2') {
      this.setState({
        step: 2,
      })
    }
  }
  render() {
    console.log('render!!!');
    console.log(this);
    const {
      step
    } = this.state;
    console.log('---step');
    console.log(step);
    return(
      <div>
        <h1>Welcome to the Tornadoes Website!</h1>
        <button onClick={()=> this.next(1)} > Step 1</button>
        <button onClick={()=> this.next(2)} > Step 2</button>
        {
          step === 1 ? <h1>Step 1 here</h1> : null
        }
        {
          step === 2 ? <h1>Step 2 here</h1> : null
        }
      </div>

    );
  }
}

// The Main component renders one of the three provided
// Routes (provided that one matches). Both the /roster
// and /schedule routes will match any pathname that starts
// with /roster or /schedule. The / route will only match
// when the pathname is exactly the string "/"
const Main = () => (
  <main>
    <Route exact path='/' component={Home}/>
  </main>
)

// The Header creates links that can be used to navigate
// between routes.
const Header = () => (
  <header>
    <nav>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/roster'>Roster</Link></li>
        <li><Link to='/schedule'>Schedule</Link></li>
      </ul>
    </nav>
  </header>
)

const App = () => (
  <div>
    <Header />
    <Main />
  </div>
)

// This demo uses a HashRouter instead of BrowserRouter
// because there is no server to match URLs
ReactDOM.render((
  <Router>
    <App />
  </Router>
), document.getElementById('root'))
javascriptreactjsreact-routerreact-router-v4query-parameters
8
Ezeewei

Réagir routeur à partir de la v4 ne vous donne plus les paramètres de requête dans son objet location. La raison étant

Il existe un certain nombre de paquets populaires qui interrogent légèrement la chaîne parsing/stringifying de manière légèrement différente, chacune de ces différences pouvant être le moyen "correct" pour certains utilisateurs et "incorrect" pour les autres. Si React Router choisissait le "right", il ne conviendrait que pour certaines personnes. Ensuite, il faudrait ajouter un moyen permettant aux autres utilisateurs de se substituer à leur package d'analyse syntaxique préféré. React Router n'utilise en interne aucune chaîne de recherche qui l'oblige à analyser les paires clé-valeur. Il n'est donc pas nécessaire de choisir laquelle d'entre elles doit être "correcte".

Cela inclus, il serait plus logique d’analyser simplement location.search dans votre vue les composants qui attendent un objet de requête.

Vous pouvez le faire de manière générique en remplaçant le withRouter de react-router comme

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

et partout où vous avez besoin d'une chaîne de requête, vous pouvez simplement l'utiliser comme

import withRouter from 'path/to/customWithRouter.js';

class Home extends Component {
  constructor(props) {
    super(props);
    console.log('-!!!')
    this.state = {
      step: 1,
    }
    this.next = this.next.bind(this);
  }

  next(stepNumber=1) {
    this.props.history.Push({
      pathname: `/adamchenwei/pen/YeJBxY?editors=0011&step=${stepNumber}`,
    });
  }
  componentDidUpdate(prevProps) {    // using componentDidUpdate because componentWillReceiveProps will be renamed to UNSAFE_componentWillReceiveProps from v16.3.0 and later removed
    const {query: { step } } = this.props.history.location;
    if(!_.isEqual(this.props.history.location.query, prevProps.history.location.query)) {
         this.setState({
             step
          })
    }
  }
  render() {
    console.log('render!!!');
    console.log(this);
    const {
      step
    } = this.state;
    console.log('---step');
    console.log(step);
    return(
      <div>
        <h1>Welcome to the Tornadoes Website!</h1>
        <button onClick={()=> this.next(1)} > Step 1</button>
        <button onClick={()=> this.next(2)} > Step 2</button>
        {
          step === 1 ? <h1>Step 1 here</h1> : null
        }
        {
          step === 2 ? <h1>Step 2 here</h1> : null
        }
      </div>

    );
  }
}

const HomeWithQuery = withRouter(Home);
3
Shubham Khatri

// A lose explanation. URL = localhost:3000/myRoute/2

<Router history={history}>
  <Route path="/myRoute/:id" component={App} />
</Router>

class App extends Component {
  render() {
    const { id } = this.props.match.params
    
    return (
      <div>
        {id === 2 ? <div>id is 2</div> : <div>id not 2</div>}
      </div>
    )
  }
}

1
Francis Leigh