Как добавить несколько страниц с React & Redux

Question

Я кодирую приложение, похожее на MediumBlog, и использую React & redux и Django Rest Framework для своего Backend. Я уже создал первую страницу, которая является первой страницей, которую вы видите, когда переходите на https://medium.com/. Я могу переходить к различным категориям без обновления страницы, что является главной целью реакции. Но теперь, когда вы хотите прочитать сообщение в среднем блоге, страница обновляется. Я понятия не имею, как это сделать с реагировать. Я знаю, как создать одностраничное приложение, но здесь, кажется, при загрузке поста загружается новая страница. У меня вопрос:

. Это загрузка новой страницы вместо нового маршрута (новый HTML-файл или что-то). Как я могу обработать эту "многостраничную" структуру с реакцией

Вотприложение для одной страницы, которое может загружать контент из разных категорий

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import { Provider } from 'react-redux';
import { store } from '../store.js';
import AppHeader from './header/AppHeader';
import HeaderCategories from './header/HeaderCategories'
import PostListStream from './posts/PostListStream';
import PostList from './posts/PostList';
import { BrowserRouter } from "react-router-dom";
import { Route, Switch } from 'react-router-dom';


class App extends Component {
  render(){
    return(
      <Provider store={store}>
        <div className="App">
          <AppHeader />
          <HeaderCategories />
          <Switch>
            <Route exact
                   key="sciences"
                   path="/sciences"
                   render={() => <PostListStream field="sciences" />}
            />
            <Route exact
                   key="littérature"
                   path="/littérature"
                   render={() => <PostListStream field="littérature" />}
            />
            <Route exact
                   key="sciences-sociales"
                   path="/sciences-sociales"
                   render={() => <PostListStream field="sciences-sociales" />}
            />
          </Switch>
          <PostList />
        </div>
      </Provider>
    )
  }
}

ReactDOM.render(<BrowserRouter>
                  <App />
                </BrowserRouter>, document.getElementById('app'));

Вот где я:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import { Provider } from 'react-redux';
import { store } from '../store.js';
import AppHeader from './header/AppHeader';
import HeaderCategories from './header/HeaderCategories'
import PostListStream from './posts/PostListStream';
import PostList from './posts/PostList';
import { BrowserRouter } from "react-router-dom";
import { Route, Switch } from 'react-router-dom';


class App extends Component {
  render(){
    return(
      <Provider store={store}>
        <div className="App">
          <AppHeader />
          <HeaderCategories />
          <Switch>
            <Route exact
                   key="sciences"
                   path="/sciences"
                   render={() => <PostListStream field="sciences" />}
            />
            <Route exact
                   key="littérature"
                   path="/littérature"
                   render={() => <PostListStream field="littérature" />}
            />
            <Route exact
                   key="sciences-sociales"
                   path="/sciences-sociales"
                   render={() => <PostListStream field="sciences-sociales" />}
            />
          </Switch>
          <PostList />
        </div>
      </Provider>
    )
  }
}

ReactDOM.render(<BrowserRouter>
                  <App />
                </BrowserRouter>, document.getElementById('app'));

Большое спасибо

Answer 1

Вы можете создавать динамические маршруты к вашим сообщениям, используя react-router-dom, аналогично тому, что вы делали с другими вашими маршрутами. react-router на самом деле не обновляет страницу, хотя выглядит так. Он просто визуализирует другой компонент при изменении route.

Чтобы создать динамические маршруты для ваших сообщений, вы можете сделать что-то вроде этого:

<Route
  path="/post/:postId"
  render={() => <PostComponent />}
/>

или вот так, если хотите, чтобы оно былочуть более читабельно:

<Route
  path="/post/:postId"
  component={PostComponent}
/>

:postId здесь находится динамический идентификатор, все, что будет помещено после /post/ в вашем URL, будет считаться postId react-router.

Внутри PostComponent вы можете сделать что-то подобное, чтобы получить переменную postId:

import { withRouter } from "react-router-dom"; 

const PostComponent = withRouter(props => (
  const postId = props.match.params.postId;

  return ();
))

Затем вы можете использовать postId, чтобы получить сообщение из бэкэнда и сделать все, что вам нужноделать с этим. Как только вы перейдете на URL своего поста, он покажет PostComponent без жесткого обновления страницы.