本文介绍了类组件中的 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 关键字.

通过这段代码片段,您基本上可以说,只有当 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 componentI 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 嵌套路由切换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-17 21:51