类组件中的 ReactJs 嵌套路由切换
[英] ReactJs Nested Route Switch in Class Component
本文介绍了类组件中的 ReactJs 嵌套路由切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个组件，应用和仪表板
App Component是主要的组件，在App里面，有一个切换到Dashboard组件我需要嵌套路由，Inside Dashboard 组件，我需要有/dashboard/blogs"它切换其中的博客组件.这里我分享两个组件，
import React, { Component } from "react";从react-router-dom"导入{BrowserRouter 作为路由器、路由、交换机}；从./pages/Signup"导入注册；从./pages/Login"导入登录；从./pages/Home"导入主页；从./dashboard/Dashboard"导入仪表板；类 App 扩展组件 {使成为() {返回 (<div id="content-wrapper"><路由器><开关><路由精确路径="/signup";组件={注册}/><路由精确路径=/login";组件={登录}/><路由精确路径=/";组件={Home}/><路由精确路径="/dashboard";组件={仪表板}/></开关></路由器>
);}}导出默认应用程序；
import React, {Component} from 'react';从./Navbar"导入导航栏；从./SideBar"导入侧边栏；导入../scripts/dashboard"；从./components/BlogList"导入{BlogList}；从react-router-dom"导入{BrowserRouter 作为路由器、路由、交换机}；从./components/DashBoardHome"导入{DashBoardHome}；类仪表板扩展组件{使成为(){返回 (<div id="包装器"><侧边栏/><div id="content-wrapper";className =d-flex flex-column"><div id="内容"><导航栏/><div className="container-fluid"><路由器><开关><路由路径={`${this.props.match.url}/blogs`}精确={true} component={BlogList}/>//这不起作用?</开关></路由器>
)}}导出默认仪表板；
提前致谢！
解决方案
问题在于 exact 关键字.
<路由精确路径=/dashboard"组件={仪表板}/>
通过这段代码片段，您基本上可以说，只有当 URL 地址恰好是.../dashboard"时，才应呈现 Dashboard 组件.
<Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList}/>
使用您所说的这段代码片段，BlogList 组件应该仅在 URL 恰好是.../dashboard/blogs/"时才呈现，但它在 内部呈现Dashboard 组件不会被渲染，因为 URL 不是.../dashboard".
从 exact 关键字component={Dashboard}/> 应该修复您的代码.
I have two components,
App and Dashboard
App Component is the main component, inside App, there is a switch to the Dashboard component
I need nested route, Inside Dashboard Component, I need to have "/dashboard/blogs" which switch the Blogs Component inside it.
Here I share the two components,
import React, { Component } from "react";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Home from "./pages/Home";
import Dashboard from "./dashboard/Dashboard";
class App extends Component {
render() {
return (
<div id="content-wrapper">
<Router>
<Switch>
<Route exact path="/signup" component={Signup}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/" component={Home}/>
<Route exact path="/dashboard" component={Dashboard}/>
</Switch>
</Router>
</div>
);
}
}
export default App;
import React, {Component} from 'react';
import Navbar from "./Navbar";
import SideBar from "./SideBar";
import "../scripts/dashboard";
import {BlogList} from "./components/BlogList";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {DashBoardHome} from "./components/DashBoardHome";
class Dashboard extends Component {
render()
{
return (
<div id="wrapper">
<SideBar/>
<div id="content-wrapper" className="d-flex flex-column">
<div id="content">
<Navbar/>
<div className="container-fluid">
<Router>
<Switch>
<Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList} /> //This is not working?
</Switch>
</Router>
</div>
</div>
</div>
</div>
)
}
}
export default Dashboard;
Thanks In Advance!
解决方案
The problem is the exact keyword.
<Route exact path="/dashboard" component={Dashboard}/>
With this code snippet you basically say, that the Dashboard component should only be rendered when the URL address is exactly ".../dashboard".
<Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList} />
With this code snippet you say, that BlogList component should be rendered only when the URL is exactly ".../dashboard/blogs/", but it is rendered inside Dashboard component witch is not rendered, because the URL is not ".../dashboard".
Removing exact keyword from <Route path="/dashboard" component={Dashboard} /> should fix your code.
这篇关于类组件中的 ReactJs 嵌套路由切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
