Неожиданный повторный рендеринг компонентов - PullRequest
Новая
       7

Неожиданный повторный рендеринг компонентов

1 голос
/ 04 февраля 2020

Я пытаюсь вернуться обратно к компоненту Меню, но когда я запускаю для этого маршрут, предыдущий визуализированный компонент Практики отображается на уровне домена root, который должен быть только для компонента Меню.

Решения для подобных вопросов в StackOverflow говорят, что в маршруте используется exact, но, как вы можете видеть, это у меня на месте.

Как мне сделать эту работу, как ожидалось? Спасибо.

Вот что у меня есть ...

Приложение. js

import React from 'react';
import './App.css';
import PracticeContextProvider from './contexts/PracticeContext';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import Menu from './pages/Menu';

function App() {
  return (
    <div className="app">      
      <PracticeContextProvider>
        <Menu />
      </PracticeContextProvider>
    </div>
  );
}

export default App;

Меню. js 

import React, { useContext } from 'react';
import {BrowserRouter as Router, Route, Switch, Link, useParams, useLocation, useRouteMatch} from 'react-router-dom';
import { PracticeContext } from '../contexts/PracticeContext';
import Practice from './Practice';
import ModuleLanguageSelector from '../components/ModuleLanguageSelector';
import ModuleListMenuItem from '../components/ModuleListMenuItem';

const Menu = () => {
  const { modulesJson } = useContext(PracticeContext);

  return (
    <div>
      <h1>Menu</h1>
      <Router>
        <Switch>
          <Route exact path="/">
            <ModuleLanguageSelector />
            { modulesJson && (
              modulesJson.map(module => {
                return (
                  <Link to={'/Practice/' + module._id} key={ module._id }>
                    <ModuleListMenuItem module={ module }></ModuleListMenuItem>
                  </Link>
                )
              })
            )}
          </Route>
          <Route exact path="/Practice/:moduleId" component={Practice} />
        </Switch>
      </Router>

    </div>
  );

}

export default Menu;

Практика. js

import React, { useContext } from 'react';
import {BrowserRouter as Router, Route, Switch, Link, useParams, useLocation, useRouteMatch} from 'react-router-dom';
import { PracticeContext } from '../contexts/PracticeContext';

import Menu from './Menu';

import ModulePracticeAnswerArea from '../components/ModulePracticeAnswerArea';
import ModulePracticeQuestion from '../components/ModulePracticeQuestion';
import ModulePracticeProgress from '../components/ModulePracticeProgress';
import ModulePracticeTutorial from '../components/ModulePracticeTutorial';

const Practice = () => {
  const { moduleId } = useParams();

  const { questionIndex } = useContext(PracticeContext);

  return (
    <Router>
      <div className="module-practice-screen">
        <h1>Practice</h1>
        <div className="module-practice-container">
          <Link to={'/'}>
            <button className="quit-practice">X</button>
          </Link>
          {
            moduleId ? 
              <React.Fragment>
                {/*<ModulePracticeTutorial moduleId={ moduleId } />*/} 
                <ModulePracticeProgress questionNumber={ questionIndex } /> 
                <ModulePracticeQuestion moduleId={ moduleId } questionNumber={ questionIndex } /> 
                <ModulePracticeAnswerArea moduleId={ moduleId } questionNumber={ questionIndex } /> 
              </React.Fragment>
            : 
              <h3>The menu should appear here!</h3>
          }
        </div>
      </div>
      <Switch>
        <Route exact path="/" component={Menu} />
      </Switch>
    </Router>
  );
};

export default Practice;

1 Ответ

3 голосов
/ 07 февраля 2020

Вам не нужно <Router> и <Switch> в Practice

 const Practice = props => {
      const { moduleId } = useParams();
      const { questionIndex } = useContext(PracticeContext);

      return (
        <div>
          <div className="module-practice-screen">
            <h1>Practice</h1>
            <div className="module-practice-container">
              <Link to="/">
                <button>X</button>
              </Link>
              {moduleId ? (
                <React.Fragment>
                  {/*<ModulePracticeTutorial moduleId={ moduleId } />*/}
                  <ModulePracticeProgress questionNumber={questionIndex} />
                  <ModulePracticeQuestion
                    moduleId={moduleId}
                    questionNumber={questionIndex}
                  />
                  <ModulePracticeAnswerArea
                    moduleId={moduleId}
                    questionNumber={questionIndex}
                  />
                </React.Fragment>
              ) : (
                  <h3>The menu should appear here!</h3>
                )}
            </div>
          </div>
        </div>
      );
    };

кодов и поле

...