Дополнительные маршруты на реагирующем маршрутизаторе 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

В вашем компоненте 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} />} />