react-router 渲染不工作； 路由不工作

Question

我正在做出反應中的向導表單並且遇到路由頁面路由問題是這樣的

主頁->向導表單（步驟1）->步驟2->步驟3..

<Route
 path="/startAProgram/step1"
 exact
 render={() => <StartAProgram />}
/>

//app.js
//There are many routes in app.js and one of routes is StartAProgram(wizard form)

function StartAProgram() {
  return (
    <WrapperDiv>
      <Stepper />
      <ProgramName /> {/* this is step 1 */}
      <Router>
        {/* <Route path="startAProgram/step1" render={() => <ProgramName />} /> */}
        <Switch>
          <Route
            path="startAProgram/step2"
            exact
            render={() => <SetTargets />}
          />
          <Route
            path="startAProgram/step3"
            render={() => <ParticipationGuidelines />}
          />
        </Switch>
      </Router>
    </WrapperDiv>
  );
}

• react-router-dom 版本：^5.2.0

function ProgramName() {
  const programName = useSelector((state) => state.programName);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: programName,
  });

  const dispatch = useDispatch();
  const history = useHistory();

  const handleOnSubmit = (data) => {
    sessionStorage.setItem('programName', Object.values(data));
    dispatch(submitStep1(data));
    history.push('./step2');
    console.log('next~');
  };

  return (
    <form onSubmit={handleSubmit(handleOnSubmit)}>
      <Text size={30} weight={800} mb={10}>
        Step 1. Program name
      </Text>
      <label htmlFor="programName">
        Program Name
        <input
          name="programName"
          {...register('programName', { required: 'fill out!' })}
        />
        <ErrorMessage errors={errors} name="programName" as="p" />
      </label>
      <Button type="submit">next</Button>
    </form>
  );
}

如果表單驗證成功但 Step2 組件渲染當前無法正常工作，則為 Step2。 頁面第 1 步渲染得很好，但它不允許我渲染第 2 步和更多。 任何人都可以解決這個問題？

Answer 1

問題

StartAProgram正在渲染這些其他路由，因此當您導航到其中一條路由時，渲染StartAProgram的路由不再匹配，並且您鏈接到的其他路由也不再掛載。

解決方案

使根步進器路徑路徑更通用，以便它可以匹配渲染任何步驟。

<Route path="/startAProgram" component={StartAProgram} />

然后重構StartAProgram以將ProgramName重新呈現在".../step1"路徑上。 刪除額外的Router組件，每個應用程序只需要一個路由器。

function StartAProgram() {
  return (
    <WrapperDiv>
      <Stepper />
      <Switch>
        <Route path="/startAProgram/step1" component={ProgramName} />
        <Route path="/startAProgram/step2" component={SetTargets} />
        <Route
          path="/startAProgram/step3"
          component={ParticipationGuidelines}
        />
      </Switch>
    </WrapperDiv>
  );
}

嵌套后代路由時，使用useRouteMatch掛鈎動態構建相對路徑是一種常見模式。

import { Switch, Route, useRouteMatch } from 'react-router-dom';

function StartAProgram() {
  const { path } = useRouteMatch();
  return (
    <WrapperDiv>
      <Stepper />
      <Switch>
        <Route path={`${path}/step1`} component={ProgramName} />
        <Route path={`${path}/step2`} component={SetTargets} />
        <Route path={`${path}/step3`} component={ParticipationGuidelines} />
      </Switch>
    </WrapperDiv>
  );
}

如果您需要將StartAProgram組件移動到不同的路徑上，這很有幫助/有用，此處的鏈接和路由相對於當前位置起作用。