React Router v4多個動態路由

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

兩件事情：

1. 使用元素 ：這將只允許使用一條路線，而無需編寫路線。 （ 請參閱本文檔 ）
2. 檢查路徑語句的順序 ：在：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用<Switch>和</Switch> App.js文件中的<div>和</div>標簽</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組件邏輯/結構 App.js為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>
    )
}

如果以這種方式構造應用程序，則路由邏輯和頂級應用程序邏輯是分開的，最終，由於Route文件和頂級App文件會變得相當密集，因此文件將變得更加混亂。

希望這可以幫助！ 讓我知道是否可以進一步解釋。