Где разместить вложенные маршруты в реакции-роутере?

Question

так что в основном я новичок в React и react-router. Все еще учусь.

Может кто-нибудь объяснить мне, почему это работает:

const App = () => (
  <Fragment>

    <Route 
      exact
      path="/"
      render={(props) => <Calendar {...props} />}
    />
    <Route
      path="/:topics"
      render={(props) => <Topics {...props} />}
    />
    <Route
      path="/:topics/:id"
      render={(props) => <Topic {...props} />}
    />
  </Fragment>
);

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, ROOT);

но если я удаляю вложенные маршруты из компонента App и помещаю их в компоненты Topics и Topic, то маршрутизация не работает.

class Topics extends Component {
  render() {
    const {match} = this.props;

    return (
      <div className="topics">

          <Route
            path={`${match.path}/:topics`}
            render={(props) => <Topics {...props} />}
          />
      </div>
    )
  }
};

Кроме того, какой подход лучше? Наличие всех Route в компоненте App или, может быть, вложенных Route во вложенных компонентах?

Answer 1

Я предпочитаю использовать response-router-dom . Особенно если вы разрабатываете для браузера.

Я обычно объявляю свой BrowserRouter (как Маршрутизатор) в моем index.js и оборачиваю его вокруг моего компонента приложения следующим образом:

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
    <Router>
        <App />
    </Router>
    document.getElementById('root')
);

Затем я вызываю компонент Route из response-router-dom в моем компоненте App.js и объявляю его в начале моего файла, например:

App.js

import { Route } from 'react-router-dom'
// IMPORT COMPONENTS

class App extends Component {
    render() {
        return (
            <div className="App">
                <Route exact path='/'           component={ HomePage }/>
                <Route exact path='/home'       component={ HomePage }/>
                <Route exact path='/discover'   component={ Discover }/>
                <Route exact path='/purchase'   component={ Purchase }/>
            </div>
        );
    }
}

После того, как вы это сделаете, вы можете направить из каждого компонента, используя компонент Link Также предоставлено response-router-dom.

Пример компонента (HomePage.js)

import { Link } from 'react-router-dom'

class HomePage extends Component {
    render() {
        return (
            <div className='HomePage'>
                <p>Press the button below to route to our Discovery page!</p>

                <Link to='/discover'>
                    <button>Press me</button>
                </Link>
            </div>
        );
    }
}

---

Это просто базовый пример. Вы можете найти больше информации и опций прямо здесь или там Github page .

Answer 2

Я предпочитаю писать компонент маршрутов

export default class Routes extends Component {
render() {
return (
  <Switch>
    <Route path='your path' component={yourcomponent} />
  </Switch>
);
}
}

и затем в компоненте приложения я называю его дочерним

  <Router history={history}>
    <Routes />
  </Router>

чтобы я мог управлять маршрутами изолированно от приложения