react-router鏈接不適用於嵌套Route

Question

編輯：經過多次測試，我終於得到一個不幸的消息，實際上破壞路由器的是我的側邊欄菜單中使用的“樹”框架。 當我不使用$（'data-widget =“ tree”'）。tree（{...時 ，路由器可以正常工作。我現在正在嘗試找出如何自行解決此問題的方法。

我基本上是通過登錄和帶有側面菜單和內容的“母版頁”來實現這個簡單的示例，因此我可以了解更多有關新版本的react-router的信息。 當我“完成”登錄（前端和后端）時，下一部分是根據用戶權限創建菜單。 然后，我意識到“ react-router-dom”中的鏈接“ Link”無效。 我嘗試了許多在網上找到的解決方案/建議，但沒有一個有效。 最后，我注意到當我在Login.jsx上放置一個鏈接時，它可以工作。 該錯誤僅出現在引用嵌套路由的鏈接上。

圖片：

https://imgur.com/2RcD2x1 （帶有有效測試鏈接的登錄屏幕）

https://imgur.com/5MRadqM （“主”屏幕帶有無效的菜單鏈接）

這是我正在使用的依賴項：

"dependencies": {
    "admin-lte": "^2.4.3",
    "axios": "^0.18.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.4"
  }

這是我的“ index.js”：

import React from 'react'
import ReactDOM from 'react-dom'
import { Switch, Route, BrowserRouter } from 'react-router-dom'

import Login from './telas/Login'
import MainPage from './telas/MainPage'

import Home from './telas/Home'
import Tela1 from './telas/Tela1'
import Tela2 from './telas/Tela2'

import Telas from './telas/Telas'
import ControleAcessos from './telas/ControleAcessos'
import ControleUsuarios from './telas/ControleUsuarios'

import registerServiceWorker from './registerServiceWorker'

const Main = () => (
    <MainPage>
        <Route>
            <Switch>
                <Route path='/main/home' component={Home} />
                <Route path='/main/tela1' component={Tela1} />
                <Route path='/main/tela2' component={Tela2} />
                <Route path='/main/controle_acessos' component={ControleAcessos} />
                <Route path='/main/controle_usuarios' component={ControleUsuarios} />
                <Route path='/main/telas' component={Telas} />
            </Switch>
        </Route>
    </MainPage>
)

const Inicial = () => (
    <Switch>
        <Route exact path='/login' component={Login} />
        <Route path='/main' component={Main} />
    </Switch>
)

ReactDOM.render(
    <BrowserRouter>
        <Inicial />
    </BrowserRouter>,
    document.getElementById('root'))

registerServiceWorker()

Answer 1

提供的路徑應如下

const Main = () => (
    <MainPage>
        <Route path='/main'>            
                <Route path='home' component={Home} />
                <Route path='tela1' component={Tela1} />
                <Route path='tela2' component={Tela2} />
                <Route path='controle_acessos' component={ControleAcessos} />
                <Route path='controle_usuarios' component={ControleUsuarios} />
                <Route path='telas' component={Telas} />             
        </Route>
    </MainPage>
)

Answer 2

我認為您的Main組件應如下所示：

 const Main = () => ( <MainPage> <Switch> <Route path='/main/home' component={Home} /> <Route path='/main/tela1' component={Tela1} /> <Route path='/main/tela2' component={Tela2} /> <Route path='/main/controle_acessos' component={ControleAcessos} /> <Route path='/main/controle_usuarios' component={ControleUsuarios} /> <Route path='/main/telas' component={Telas} /> </Switch> </MainPage> ) 

Answer 3

我想提出對嵌套路由做出反應的基本建議。 為了使嵌套路由起作用，我們將嵌套路由放在嵌套組件本身中。

錯誤

<Route path='/lists' component={Lists}>
  <Route path='/lists/:listId' component={List} />
</Route>

正確

<Route path='/lists' component={Lists} />

和

const Lists = ({ match }) => (
  <div>
    <h2>Lists</h2>
    <Link to={`${match.url}/exampleListId`}>
      Example list
    </Link>
    <Route path={`${match.url}/:listId`} component={List}/>
  </div>
) 

這是文檔對此的說明。