我是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中也做同样的事情。
但是,如果这不是最佳方法,请建议另一种方法。
答案 0 :(得分:1)
两件事:
`
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文件都可以变得相当密集,因此文件将变得更加混乱。 />
希望这会有所帮助!让我知道是否可以进一步解释。