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>
)

documentation对此有何评论。

react-router链接不适用于嵌套Route

3 个答案:

错

正确