React Router v4 Несколько динамических маршрутов

Question

Я новичок в React Router, поэтому, если об этом спрашивали раньше, возможно, кто-то может указать мне правильное направление!По сути, у меня есть установка WordPress, через которую я извлекаю данные своих веб-сайтов через API.

Я создал пользовательские маршруты для запроса своих страниц и моих сообщений слагом.

С помощью реагирующего маршрутизатора мне удалось создать шаблон с именем Page.js, который динамически изменяется с использованием приведенного ниже кода.

Однако сейчас я пытаюсь сделать то же самое с блогом.сообщений, но приложение не использует Blog.js. По умолчанию оно возвращается к Page.js

, вот мой код App.js ...

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './pages/Home';
import Page from './pages/Page';
import Blog from './pages/Blog';
import Header from './components/Header';
import Footer from './components/Footer';

class App extends React.Component {
  render() {
    return (
      <Router>
      <div>
          <Header/>
          <Route exact path="/" component={Home} />
          <Route path="/:slug" component={Page} />
          <Route path="/blog/:slug" component={Blog} />
          <Footer/>
      </div>
      </Router>
    );
  }
}

export default App;

Подробнее:

Page.js работает путем проверки const {slug} = this.props.match.params;а затем запрашивает WordPress, используя этот слаг для получения необходимых данных.В componentDidUpdate я проверяю prevProps, чтобы увидеть, совпадает ли слаг с предыдущим слагом, если нет, он извлекает новые данные.

Это прекрасно работает, и я надеялся сделать то же самое в Blog.js.

Однако, если это не лучший подход, пожалуйста, посоветуйте другой метод.

Answer 1

Я думаю, что вы достаточно близки к рекомендуемой реализации, вам нужно всего несколько небольших настроек.

Во-первых,
В вашем файле App.js, который вы 'фактически обрабатывая маршрутизацию, без использования компонента <Switch>, предоставляемого React Router, заменив теги <div> и </div> в вашем файле App.js на <Switch> и </Switch> соответственно , если getэто работает для вас.См. Ниже ...

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; //make sure you import it also!
import Home from './pages/Home';
import Page from './pages/Page';
import Blog from './pages/Blog';
import Header from './components/Header';
import Footer from './components/Footer';

class App extends React.Component {
  render() {
     return (
      <Router>
        <Switch> //Add this in
          <Header />
          <Route exact path="/" component={Home} />
          <Route path="/blog/:slug" component={Blog} />
          <Route path="/:slug" component={Page} />
          <Footer />
       </Switch> //Add this in
     </Router>
    );
  }
}

export default App;

Я бы порекомендовал пойти еще дальше!

Чтобы сделать эти компоненты более понятными, вам следует провести рефакторинг функциональность маршрутизации в файл routes.js и верхний уровень логика / структура компонента приложения в файл App.js.См. Ниже ...

In App.js:

Этот файл предназначен для обработки структуры и логики базового приложения.Например, в этот файл вы импортируете <Header>, <Footer> и компонент Route.

import * as React from 'react'
import Header from './../Header/Header.jsx'
import Footer from './../Footer/Footer.jsx'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
         // Handle your top-level application state here
        }
    }

    // define your top-level application functions here

    render() {
        return (
            <div>
                <Header />
                <main>
                    {this.props.children} //This where the Route components will render
                </main>
                <Footer />
            </div>
        )
    }
}

export default App

In Routes.js:

В этом файле вы должны import свой App компонент, а затем обрабатывать операторы маршрутизации.

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

import App from './components/App'
import Home from './pages/Home'
import Page from './pages/Page'
import Blog from './pages/Blog'

/* construct routes */
export default () => {
    return (
        <Router>
            <App>
                <Switch>
                    <Route path='/' exact component={Home} />
                    <Route path='/blog/:slug' component={Blog} />
                    <Route path='/:slug' component={Page} />
                </Switch>
            </App>
        </Router>
    )
}

Если вы структурируете свое приложение таким образом, ваша логика маршрутизации и верхняя частьлогика приложений высокого уровня разделена, и в конце концов ваши файлы будут менее загромождены, так как и файлы маршрутов, и файлы приложений верхнего уровня могут стать довольно плотными.

Надеюсь, это поможет!Дайте мне знать, если я смогу что-нибудь объяснить.

Answer 2

Две вещи:

1. Использовать элемент : это позволит использовать только один маршрут без компоновки.( См. Эту документацию )
2. Проверьте порядок операторов пути : используйте определенные пути перед: param, это исключает рассмотрение / blog /: slug как параметр /: slug .

`

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
class App extends React.Component {
  render() {
    return (
      <Router>
      <div>
          <Header/>
          <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/blog/:slug" component={Blog} />
              <Route path="/:slug" component={Page} />
          </Switch>
          <Footer/>
      </div>
      </Router>
    );
  }
}