0
223
Viewsel renderizado de react-router no funciona; el enrutamiento no funciona
Estoy creando un formulario de asistente en React.js y tengo un problema con el enrutamiento el enrutamiento de la página es así
inicio -> formulario del asistente (paso 1) -> paso 2 -> paso 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>
);
}
- versión de 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>
);
}
Sería el Paso 2 si la validación del formulario es exitosa, pero el procesamiento del componente del Paso 2 no funciona actualmente. El Paso 1 de la página se procesa bien, pero no me permite procesar el paso 2 y más. Cualquiera puede ¿resuelve este problema?
1 answers
Answer question0
Tema
StartAProgram está representando estas otras rutas, por lo que cuando navega a una de esas rutas, la ruta que representa StartAProgram ya no coincide y esas otras rutas a las que se está vinculando ya no están montadas.
Solución
Haga que la ruta de la ruta paso a paso raíz sea más genérica para que pueda coincidir con la representación de cualquiera de los pasos.
<Route path="/startAProgram" component={StartAProgram} />
Luego refactorice StartAProgram para volver a representar ProgramName en una ruta ".../step1" . Elimine el componente de Router adicional, solo necesita un enrutador por aplicación.
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>
);
}
Al anidar rutas descendientes, es un patrón común usar el gancho useRouteMatch para construir dinámicamente rutas relativas.
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>
);
}
Esto es útil si necesita mover el componente StartAProgram a una ruta diferente, los enlaces y rutas desde aquí funcionan en relación con la ubicación actual.