[英]react-router render is not working; routing is not working
I'm making wizard form in react and have got a problem with routing page routing is like this我正在做出反应中的向导表单并且遇到路由页面路由问题是这样的
home -> wizard form(step1) -> step2 ->step3..主页->向导表单(步骤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>
);
}
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>
);
}
It would be Step2 if the form validation is successful but Step2 component rendering is not working currently.如果表单验证成功但 Step2 组件渲染当前无法正常工作,则为 Step2。 Page Step 1 is rendering well, but it is not letting me render step 2 and more.页面第 1 步渲染得很好,但它不允许我渲染第 2 步和更多。 Anyone can solve this problem?任何人都可以解决这个问题?
StartAProgram
is rendering these other routes, so when you navigate to one of those routes, the route rendering StartAProgram
is no longer matched and those other routes you are linking to are no longer mounted. StartAProgram
正在渲染这些其他路由,因此当您导航到其中一条路由时,渲染StartAProgram
的路由不再匹配,并且您链接到的其他路由也不再挂载。
Make the root stepper route path more generic so it can match rendering any of the steps.使根步进器路径路径更通用,以便它可以匹配渲染任何步骤。
<Route path="/startAProgram" component={StartAProgram} />
Then refactor StartAProgram
to render ProgramName
back on a ".../step1"
path.然后重构StartAProgram
以将ProgramName
重新呈现在".../step1"
路径上。 Remove the extra Router
component, you only need one router per app.删除额外的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>
);
}
When nesting descendent routes it is a common pattern to use the useRouteMatch
hook to dynamically build relative paths.嵌套后代路由时,使用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>
);
}
This is helpful/useful if you need to move the StartAProgram
component around onto a different path, the links and routes from here work relative to the current location.如果您需要将StartAProgram
组件移动到不同的路径上,这很有帮助/有用,此处的链接和路由相对于当前位置起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.