Question

我是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中也做同样的事情。

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

Answer 1

两件事：

使用元素：这将仅允许使用一条路线，而无需编写路线。（See this documentation）
检查路径语句的顺序：在：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

Answer 2

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

首先
在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文件都可以变得相当密集，因此文件将变得更加混乱。 />

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

React Router v4多个动态路由

2 个答案: