React组件在改变路径时不会被移除

Question

我在create-react-app中创建了我的应用程序。当我进入路径/"users/create"该页面在屏幕上保留路径users ("users")的组件，并且该组件未被删除当重新加载路径页("users/create")它为我工作完美

我发送代码的截图

路线

function App() {
return (
<LoginState>
<AlertState>
<DashboardState>
<DocumentState>
<UsersState>
<RelasesState>
<Router>
<Switch>
<Route exact path="/login" component={Login}/>
<Route exact path="/reset-pwd" component={ResetPwd}/>
<div className="wrapper">
<Header />
<div className="main-panel">
<RoutePrivate exact path="/" component={Dashboard}/>
<RoutePrivate exact path="/documents" component={Documents}/>
<RoutePrivate exact path="/document/:id" component={Document}/>
<RoutePrivate exact path="/usuarios" component={Users}/>
<RoutePrivate exact path="/usuarios/:userId" component={Users}/>
<RoutePrivate exact path="/usuarios/create" component={NewUser}/>
<RoutePrivate exact path="/usuarios/show/:id" component={User}/>
<RoutePrivate exact path="/usuarios/edit/:id" component={EditUser}/>
<RoutePrivate exact path="/comunicados" component={Relases}/>
<RoutePrivate exact path="/comunicados/:id" component={Relases}/>
<RoutePrivate exact path="/comunicados/send-email/:id" component={Relase}/>
<RoutePrivate exact path="/docslab" component={DocsLab} />
</div>
<Sidebar />
</div>
</Switch>
</Router>
</RelasesState>
</UsersState>
</DocumentState>
</DashboardState>
</AlertState>
</LoginState>
);
}
export default App;

"/usuarios"输入图片描述

当从页面本身更改链接到"create/users"它返回前一个组件并低于新组件输入图片描述

我注意到，当我从"/usuarios/:userId"我一切都很好，你认为我做错了什么?非常感谢您的支持。

Answer 1

好的，我收集到，在某些情况下，您的代码呈现"/usuarios/:userId"one_answers"/usuarios/create"路径。这样做的原因是因为您正在将所有路由呈现到Switch中的包装器中。这似乎有效果，就像它被渲染没有在一个Switch组件，这意味着所有的匹配被返回和渲染。换句话说，Switch不匹配"/login"或"/reset-pwd"所以它是匹配的。和渲染div。

使用第二个"inner"Switch组件。

第二个问题是Switch组件也将匹配并呈现第一个匹配，所以顺序和路径特异性很重要!"/usuarios/:userId"没有"/usuarios/create"那么具体，但也会从字面上匹配"/usuarios/create"。命令路由指定moreless指定路径。请注意，当你正确指定顺序和专一性时，你不一定需要在每条路由上指定exact道具，因为匹配现在是为你工作的，而不是反对你。

为了完全正确，只有Route和Redirect组件是Switch的有效子组件，因此您还需要将包装器呈现为Route。这样做之后，你就会更清楚为什么"嵌套"了。

切换

呈现匹配的第一个子<Route>或<Redirect>位置。

<Router>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/reset-pwd" component={ResetPwd}/>
<Route>
<div className="wrapper">
<Header />
<div className="main-panel">
<Switch>
<RoutePrivate path="/document/:id" component={Document}/>
<RoutePrivate path="/documents" component={Documents}/>
<RoutePrivate path="/usuarios/show/:id" component={User}/>
<RoutePrivate path="/usuarios/edit/:id" component={EditUser}/>
<RoutePrivate path="/usuarios/create" component={NewUser}/>
<RoutePrivate path="/usuarios/:userId" component={Users}/>
<RoutePrivate path="/usuarios" component={Users}/>
<RoutePrivate path="/comunicados/send-email/:id" component={Relase}/>
<RoutePrivate path="/comunicados/:id" component={Relases}/>
<RoutePrivate path="/comunicados" component={Relases}/>
<RoutePrivate path="/docslab" component={DocsLab} />
<RoutePrivate path="/" component={Dashboard}/>
</Switch>
</div>
<Sidebar />
</div>
</Route>
</Switch>
</Router>