React Router v4 多个动态路由

Question

我是 React Router 的新手，所以如果之前有人问过这个问题，也许有人可以为我指明正确的方向！基本上我有一个 WordPress 安装，我通过 API.

从我的网站数据中提取数据

我已经创建了自定义路由来通过 slug 查询我的页面和我的帖子。

使用 React 路由器，我能够创建一个名为 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 来工作；然后使用该 slug 查询 WordPress 以提取所需的数据。在 componentDidUpdate 中，我正在检查 prevProps 以查看 slug 是否与之前的 slug 匹配，如果不匹配则获取新数据。

效果很好，我希望在 Blog.js 中也能做到这一点。

但是，如果这不是最佳方法，请告知其他方法。

Answer 1

两件事：

Use element: 这将只允许使用一个路由，不允许组合。 (See this documentation)
检查路径语句的顺序：在: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>
    );
  }
}

Answer 2

我认为您已经非常接近推荐的实现方式，只需进行一些小的调整即可实现。

第一，
在您的 App.js 文件中，您实际上是在处理路由，而不使用 React Router 提供的 <Switch> 组件，替换 App.js 中的 <div> 和 </div> 标签分别带有 <Switch> 和 </Switch> 的文件应该让这个为你工作。见下文...

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 组件 logic/structure 到 App.js 文件中。见下文...

在 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

在 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>
    )
}

如果您以这种方式构建您的应用程序，您的路由逻辑和顶级应用程序逻辑是分开的，最终您的文件将不那么混乱，因为路由文件和顶级应用程序文件都可以变得相当密集。

希望这对您有所帮助！让我知道是否可以进一步解释。

React Router v4 多个动态路由

React Router v4 Multiple Dynamic Routes

javascript

wordpress

reactjs

react-router-v4