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组件移动到不同的路径上，这很有帮助/有用，此处的链接和路由相对于当前位置起作用。