时间戳

首页 > 解决方案 > 反应路由器 4 上的子路由

reactjs - 反应路由器 4 上的子路由

问题描述

我在划分应用程序和使用多个路由器时遇到问题。我有一个主路由器，它处理几个小型应用程序，并且在每个迷你应用程序中我想管理其合适的路由。我失败了什么？我想要做的是当我收到请求的数据时，将我重定向到一个新屏幕，但我无法得到它。有谁能够帮我？谢谢

示例https://stackblitz.com/edit/react-c2tkgf?file=Hello.js

路由.js

import { BrowserRouter } from 'react-router-dom'
import React from 'react'
import { Switch, Route } from 'react-router-dom'
import { AuthenticatedRoute } from 'components/authenticated-route'
import Clients from 'components/clients'
import { Login } from 'components/login'
import Home from './Home/Home'
const Routes = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />} />
        <Route exact path="/clients" component={Clients} />
        <Route exact path="/login" component={Login} />} />
      </Switch>
    </BrowserRouter>
  )
}

export default Routes

客户端.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import Dashboard from './Dashboard/Dashboard'
import { Redirect, Route, Switch } from 'react-router-dom'

class Clients extends Component {
  render() {
    return (
      <div>
        <SearchCustomers />
        {this.props.customer.token ? (
          <div>
            <Switch>
              <Route path={`/clients:${this.props.customer.id}/dashboard`} component={Dashboard} />
            </Switch>
            <Redirect to={`/clients:${this.props.customer.id}/dashboard`} />
          </div>
        ) : null}
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    customer: state.customer,
  }
}

export default connect(mapStateToProps)(Clients)

标签： reactjsreact-router-v4

解决方案

在您的 Routes 组件中，您有：

<Route exact path="/clients" component={Clients} />
<Route exact path="/login" component={Login} />} />

既然你exact在那里，这些组件只会在恰好/clients或时呈现/login。在您构建的组件中，一旦您更改路径，您的父组件将不再呈现，因此这些组件内的任何内容都不会呈现。从您的路线中删除确切的：

<Rout path="/clients" component={Clients} />
<Rout path="/login" component={Login} />} />

推荐阅读