Question

我正在编写类似MediumBlog的应用程序，并且我在后端使用React＆redux和Django Rest Framework。我已经制作了第一页，这是您转到https://medium.com/时看到的第一页我能够导航到不同的类别而无需刷新页面，这是React的主要目的。但是现在，当您想阅读中级博客中的帖子时，页面将刷新。我不知道该如何反应。我知道如何构建单页应用程序，但是在这里，单击某个帖子时似乎正在加载一个新页面。我的问题是：

。这是否正在加载新页面而不是新路线（新HTML文件或其他内容）。如何用react处理这种“多页”结构

这是我的单页应用程序，可以加载不同类别的内容

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是一个动态ID，/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从后端获取您的帖子，并做任何您需要做的事情。立即访问您的帖子网址，它将显示PostComponent，而无需刷新页面。

如何使用React＆Redux添加多个页面

1 个答案: