Question

我试图导航回Menu组件，但是当我触发一条路线来执行此操作时，先前呈现的Practice组件将在根域级别呈现，该根域级别应该仅适用于Menu组件。

针对StackOverflow上类似问题的解决方案表示在该路由中使用exact，但是正如您所看到的，我已经将其安装到位。

我如何使这项工作按预期进行？谢谢。

这就是我所拥有的...

App.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;

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 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;

Practice.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;

Answer 1

您不需要<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>
      );
    };

codesandbox

意外重新渲染组件

1 个答案: