React Router v4多个动态路由

时间:2018-10-08 16:39:15

标签: javascript wordpress reactjs react-router-v4

我是React Router的新手,所以如果有人问过这个问题,也许有人可以向我指出正确的方向!基本上,我安装了WordPress,并通过API提取了网站数据。

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

使用React Router,我能够创建一个名为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中也做同样的事情。

但是,如果这不是最佳方法,请建议另一种方法。

2 个答案:

答案 0 :(得分:1)

两件事:

  1. 使用元素:这将仅允许使用一条路线,而无需编写路线。 (See this documentation
  2. 检查路径语句的顺序:在:param之前使用定义的路径,这样可以避免将 / blog /:slug 视为 /:slug 参数。

`

declare @t table(a varchar(20),b varchar(20),c varchar(20))
    insert into @t values('qqq','www','ddd/ff'), ('qqq','www','dddff')

SELECT  a, b, 
        case when charindex('/',c) > 0 then left(c,charindex('/',c)-1) else c end As c_1,
        case when charindex('/',c) > 0 then right(c,charindex('/',reverse(c))-1) else null end As c_2 
FROM @t

答案 1 :(得分:1)

我认为您已经非常接近建议的实施方式,只需进行一些小调整就可以达到目标。

首先
App.js文件中,您实际上是在处理路由,而不使用React Router提供的<Switch>组件,而是替换<div>中的</div>App.js标签分别使用<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组件逻辑/结构重构为{{1} }文件。见下文...


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

如果以这种方式构建应用程序,则路由逻辑和顶级应用程序逻辑是分开的,最终,由于Route文件和顶级App文件都可以变得相当密集,因此文件将变得更加混乱。 />

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