亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ReactJs 類組件中的嵌套路由開關

ReactJs 類組件中的嵌套路由開關

智慧大石 2022-11-27 16:53:18
我有兩個組件,App 和 DashboardApp Component是主要組件,在App內部,有一個到Dashboard組件的開關我需要嵌套路由,在Dashboard Component內部,我需要有“/dashboard/blogs”來切換里面的Blogs Component。在這里我分享兩個組件,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;提前致謝!
查看完整描述

1 回答

?
斯蒂芬大帝

TA貢獻1827條經驗 獲得超8個贊

問題是exact關鍵字。

<Route exact path="/dashboard" component={Dashboard}/>

通過這段代碼片段,您基本上可以說,僅當 URL 地址恰好為“.../dashboard”時,才應呈現儀表板組件。

<Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList} />

使用你說的這個代碼片段,BlogList只有當 URL 恰好是“.../dashboard/blogs/”時才應該呈現該組件,但它在Dashboard組件內部呈現 witch 不會呈現,因為 URL 不是“.../”儀表板”。

從中刪除exact關鍵字<Route path="/dashboard" component={Dashboard} />應該可以修復您的代碼。


查看完整回答
反對 回復 2022-11-27
  • 1 回答
  • 0 關注
  • 108 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號