Реакция вложенного маршрута не меняется - PullRequest
Новая
       55

Реакция вложенного маршрута не меняется

0 голосов
/ 16 декабря 2018

Я пытаюсь создать несколько маршрутов внутри своей панели, но у меня возникли некоторые сложности, у моего проекта есть корневая страница, на которой есть маршрут для / admin, он s working fine, inside of the admin page Im using the same code with /home but it не работает (для доступа к / admin / home) .. чтомой код:

root: 

render() {
    return (
      <Router>
        <div>
        <Navigation authUser={this.state.authUser} />

          <Route
            exact path={routes.ADMIN}
            component={AdminPage}
          />
        </div>
      </Route>

admin: render () {const {users} = this.props; 

return (
  <div>
    <Switch>
      <Route
        exact path={routes.ADMIN_HOME}
        component={AdmHomePage}
      />

    </Switch>

  </div>

route.ADMIN_HOME =='/ home'

route.ADMIN == '/ admin'

1 Ответ

0 голосов
/ 16 декабря 2018

Вам необходимо вложить весь путь для под-маршрутов, включая родительский путь.

например, route.ADMIN_HOME должен быть /admin/home

Также важно, чтобы родительский маршрут не включалточная опора.Это связано с тем, что родительский маршрут не будет отображаться, если он точно не равен /admin, поэтому он никогда не будет отображать маршруты в родительском компоненте.

Ниже я привел работающий пример.Заметка;Я отключил BrowserRouter для HashRouter, чтобы он работал на StackOverflow. 

const HashRouter = ReactRouterDOM.HashRouter;
const Route = ReactRouterDOM.Route;
const Link = ReactRouterDOM.Link;
const Switch = ReactRouterDOM.Switch;

const Players = () => (
  <div>
    <h5>Players</h5>
    <Switch>
      <Route path="/players/joe" render={() => <div>Joe</div>} />
      <Route path="/players/emily" render={() => <div>Emily</div>} />
    </Switch>
  </div>
);

ReactDOM.render(
  <HashRouter>
    <div>
      <h5>Navigation</h5>
      <ul>
        <li><Link to="/players">Players</Link></li>
        <li><Link to="/players/joe">Players - Joe</Link></li>
        <li><Link to="/players/emily">Players - Emily</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <Switch>
        <Route path="/players" component={Players} />
        <Route path="/about" render={() => <div>About Page</div>} />
      </Switch>
    </div>
  </HashRouter>,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<div id="root"></div>
...