反应路由器4的子路由

Question

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

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

Routes.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

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

Answer 1

在您的路线组件中有：

<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} />} />