react router（用了react或者vue，如何做SEO优化呢）

本文目录

• 用了react或者vue，如何做SEO优化呢
• react router 怎么获取参数
• react-router中可以被引用组件包含哪些
• 用了react-router怎么部署

用了react或者vue，如何做SEO优化呢

使用 React 或 Vue 做 SEO 优化需要借助 Nodejs 实现服务端渲染（SSR）。

而要实现服务端渲染需要先搭建一个脚手架，你可以自己从零开始搭建脚手架，但这很麻烦。最简单的就是使用开源的框架，它们一般内置就封装好了脚手架，比如基于 React 的 Next.js，和基于 Vue 的 Nuxt.js。你也可以借助开源的脚手架比如 Razzle 来实现 SSR 渲染。Razzle 是我用过的比较好用的工具，因为它灵活。下面以 React + Razzle 为例，讲讲如何做 SEO 优化（本文的示例代码放在GitHub：github.com/liamwang/react-starter）。

首先，使用 Razzle 搭建脚手架，使用如下命令安装 Razzle 并运行它：

其实以上这样简单的一步，Razzle 基本上就把大部分工作已经完成了。然后开始添加几个测试页面并配置 Router 路由。文件结构和路由配置如下图所示：

红色圈出来的部分是添加的几个示例页面，具体代码可以参照我的 GitHub 源码。这就实现了一个简单的支持服务端渲染的网站，运行效果如下：

接着， server.js 实现自定义服务端渲染逻辑。打开 server.js 文件，你会发现工具已经帮你写好了基本的服务端渲染代码，但是你可能要根据需求进行自定义，比如自定义 titile、 meta 标签。下面是一个示例：

为了利于 SEO，你可以在这里任意自定义 HTML 头标签，比如标题和和关键字等。

最后，剩下的工作基本上就和你平时写 React 代码一样，比如 Redux、Mobx、Sass 等。

有不清楚的欢迎留言交流，希望我的回答对你有帮助！

react router 怎么获取参数

import React from ’react’
import { render } from ’react-dom’
const About = React.createClass({/*...*/})
const Inbox = React.createClass({/*...*/})
const Home = React.createClass({/*...*/})
const App = React.createClass({
getInitialState() {
return {
route: window.location.hash.substr(1)
}
},
componentDidMount() {
window.addEventListener(’hashchange’, () =》 {
this.setState({
route: window.location.hash.substr(1)
})
})
},
render() {
let Child
switch (this.state.route) {
case ’/about’: Child = About; break;
case ’/inbox’: Child = Inbox; break;
default: Child = Home;
}
return (
《div》
《h1》App《/h1》
《ul》
《li》《a href=“#/about“》About《/a》《/li》
《li》《a href=“#/inbox“》Inbox《/a》《/li》
《/ul》
《Child/》
《/div》
)
}
})
render(《App /》, document.body)

react-router中可以被引用组件包含哪些

react实现路由直接使用react-router ReactRouter由Ryan Florence发应用于ReactJS路由组件通定义ReactJS组件及相关组件实现页面路由映射、参数解析传递例： var ReactRouter = require(’react-router’); var Routes = ReactRouter.Routes; var Ro...

用了react-router怎么部署

　　在Redux 应用中使用路由功能，可以搭配使用 React Router 来实现。 Redux 和 React Router 将分别成为数据和 URL 的事实来源（the source of truth）。 在大多数情况下， 最好将他们分开，除非需要时光旅行和回放 action 来触发 URL 改变。
1、需要从 React Router 中导入 《Router /》 和 《Route /》。代码如下：
import { Router, Route, browserHistory } from ’react-router’;
在 React 应用中，通常需要会用 《Router /》 包裹 《Route /》。 如此，当 URL 变化的时候，《Router /》 将会匹配到指定的路由，然后渲染路由绑定的组件。 《Route /》 用来显式地把路由映射到应用的组件结构上。 用 path 指定 URL，用 component 指定路由命中 URL 后需要渲染的那个组件。
const Root = () =》 (
《Router》
《Route path=“/“ component={App} /》
《/Router》
);
另外，在 Redux 应用中，仍将使用 《Provider /》。 《Provider /》 是由 React Redux 提供的高阶组件，用来让开发者将 Redux 绑定到 React 。
然后，开发者从 React Redux 导入 《Provider /》：
import { Provider } from ’react-redux’;
开发者将用 《Provider /》 包裹 《Router /》，以便于路由处理器可以访问 store。
const Root = ({ store }) =》 (
《Provider store={store}》
《Router》
《Route path=“/“ component={App} /》
《/Router》
《/Provider》
);
2、渲染组件
现在，如果 URL 匹配到 ’/’，将会渲染 《App /》 组件。此外，开发者将在 ’/’ 后面增加参数 (:filter), 当尝试从 URL 中读取参数 (:filter)，需要以下代码：
《Route path=“/(:filter)“ component={App} /》
也可以将 ’#’ 从 URL 中移除（例如：）。 开发者需要从 React Router 导入 browserHistory 来实现：
import { Router, Route, browserHistory } from ’react-router’;
然后将它传给 《Router /》 来移除 URL 中的 ’#’：
《Router history={browserHistory}》
《Route path=“/(:filter)“ component={App} /》
《/Router》
只要开发者不需要兼容古老的浏览器，比如IE9，你都可以使用 browserHistory。
components/Root.js
import React, { PropTypes } from ’react’;
import { Provider } from ’react-redux’;
import { Router, Route, browserHistory } from ’react-router’;
import App from ’./App’;
const Root = ({ store }) =》 (
《Provider store={store}》
《Router history={browserHistory}》
《Route path=“/(:filter)“ component={App} /》
《/Router》
《/Provider》
);
Root.propTypes = {
store: PropTypes.object.isRequired,
};
export default Root;