React Router 路由解决方案（react路由详解）

25-02-06 22

如果您对ReactRouter路由解决方案和react路由详解感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解ReactRouter路由解决方案的各种细节，并对react路由详解进行深入的分析，

如果您对React Router 路由解决方案和react路由详解感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解React Router 路由解决方案的各种细节，并对react路由详解进行深入的分析，此外还有关于# react-router v4 刷新出现找不到页面(NO FOUND)解决方案、15.React路由 react-router4.x 动态路由以及get传值 React中使用url模块、nginx 适配react-router browserRoute 路由问题、React Router 1.0.0 发布，ReactJS 路由解决方案的实用技巧。

本文目录一览：

React Router 路由解决方案（react路由详解）
# react-router v4 刷新出现找不到页面(NO FOUND)解决方案
15.React路由 react-router4.x 动态路由以及get传值 React中使用url模块
nginx 适配react-router browserRoute 路由问题
React Router 1.0.0 发布，ReactJS 路由解决方案

React Router 路由解决方案（react路由详解）

React Router 介绍

React Router 一个用于 React.js
的路由解决方案（routing solution）。它轻松可以同步你的 app 和 URL，同时给嵌套，转换，和服务端渲染一流的支持。

特性：

嵌套视图映射到嵌套路由
模块化构建路由层级
同步和异步转移挂钩
转换中止/重定向/重试
动态 segments
查询参数
当.active 类的路由活动时可以自动链接
Multiple root routes
Hash 或 HTML5 历史（含备份) URLs
声明重定向路由
声明未找到路由
浏览器滚动行为带有转变效果

示例：

var routes = (
                                              );
Router.run(routes, function (Handler) {
  React.render(, document.body);
});
// Or, if you''d like to use the HTML5 history API for cleaner URLs:
Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(, document.body);
});

React Router 官网

http://rackt.github.io/react-router/

# react-router v4 刷新出现找不到页面(NO FOUND)解决方案

react-router v4 刷新页面出现找不到问题解决方案

原因

### 浏览器被刷新相当于重新请求了服务端的 page 接口,当后端没有这个接口时,就没有document文档返回,这时url 并没有被js 观察处理

解决

如果是使用webpack-dev-server,请将 historyApiFallback: true 这个配置加入至 devServer 中. 以及在output 中配置 publicPath: ''/''
如果是使用自定义的node服务器的话,需自己手写一个404接口. 将所有的url 都返回到index.html文档

实例

koa

const koaWebpack = require(''koa-webpack'');

async startService() {

const middleware = await koaWebpack({ config: this.webpackConfig });

this.app.use(middleware);

app.use(async ctx => {
  const filename = path.resolve(this.webpackConfig.output.path, ''index.html'');
  ctx.response.type = ''html'';
  ctx.response.body = middleware.devMiddleware.fileSystem.createReadStream(
    filename
  );
});

this.app.listen(this.port, () => {
  console.log(`当前服务器已启动`, `http://${this.host}:${this.port}`);
});

}



[参考地址][1]

15.React路由 react-router4.x 动态路由以及get传值 React中使用url模块

一.动态路由

定义

<Route path="/content/:aid" component={Content} />

传值

<Link to={`/content/${value.aid}`}>{value.title}</Link>

获取

    constructor(props) {
        super(props);
        this.state = {  };
    }
    //生命周期函数
    componentDidMount(){
        //获取动态路由的传值
        console.log(this.props.match.params.aid);  
    }

二.get传值

传值

<li key={key}>                                   
    <Link to={`/productcontent?aid=${value.aid}`}>{value.title}</Link>
</li>

获取（引入url模块）

    //生命周期函数
    componentDidMount(){
        // this.props.location.search
        //获取get传值
        console.log(url.parse(this.props.location.search,true));
        var query=url.parse(this.props.location.search,true).query;
        console.log(query)
    }

首页组件


/*

  react路由的配置：
    1、找到官方文档 https://reacttraining.com/react-router/web/example/basic

    2、安装  cnpm install react-router-dom --save


    3、找到项目的根组件引入react-router-dom

       import { BrowserRouter as Router, Route, Link } from "react-router-dom";

    4、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）


         <Router>

                <Link to="/">首页</Link>

                <Link to="/news">新闻</Link>

                <Link to="/product">商品</Link>


               <Route exact path="/" component={Home} />
               <Route path="/news" component={News} />    
               <Route path="/product" component={Product} />   
         </Router>


         exact表示严格匹配


react动态路由传值

      1、动态路由配置

          <Route path="/content/:aid" component={Content} />   

      2、对应的动态路由加载的组件里面获取传值

            this.props.match.params


      跳转：<Link to={`/content/${value.aid}`}>{value.title}</Link>

react get传值  


      1、获取 this.props.location.search


      

         
*/



import React, { Component } from ''react'';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";


import ''./assets/css/index.css''

import Home from ''./components/Home'';
import News from ''./components/News'';
import Product from ''./components/Product'';
import Content from ''./components/Content'';

import ProductContent from ''./components/ProductContent'';

class App extends Component {

  render() {
    return (
        <Router>
          <div>           

              <header className="title">
              
                <Link to="/">首页</Link>

                <Link to="/news">新闻</Link>

                <Link to="/product">商品</Link>

              </header>


               <br />
               <hr />
      
               <br />
      
      
              <Route exact path="/" component={Home} />
              <Route path="/news" component={News} />    
              <Route path="/product" component={Product} /> 
              <Route path="/productcontent" component={ProductContent} />

              <Route path="/content/:aid" component={Content} />                 
          </div>
      </Router>
    );
  }
}

export default App;

动态路由

新闻组件

import React, { Component } from ''react'';
import { Link } from "react-router-dom";

class News extends Component {
    constructor(props) {
        super(props);
        this.state = {  

            list:[

                {
                    aid:''11'',
                    title:''我是新闻1111''
                },
                {
                    aid:''222'',
                    title:''我是新闻222''
                },
                {
                    aid:''3'',
                    title:''我是新闻333''
                },
                {
                    aid:''4'',
                    title:''我是新闻4444''
                }
            ]
        };
    }
    render() {
        return (
            
            <div>

                我是新闻组件

                <ul>
                    {

                        this.state.list.map((value,key)=>{

                            return (
                                <li key={key}>                                   
                                    <Link to={`/content/${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                    
                </ul>
            </div>
        );
    }
}

export default News;

新闻详情组件

import React, { Component } from ''react'';


class Content extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    //生命周期函数
    componentDidMount(){


        //获取动态路由的传值
        console.log(this.props.match.params.aid);  

    }
    render() {
        return (
            
            <div>

                我是新闻详情组件
            </div>
        );
    }
}

export default Content;

get传值

import React, { Component } from ''react'';

import { Link } from "react-router-dom";
class Product extends Component {
    constructor(props) {
        super(props);
        this.state = { 

            list:[

                {
                    aid:''11'',
                    title:''我是商品1111''
                },
                {
                    aid:''222'',
                    title:''我是商品222''
                },
                {
                    aid:''3'',
                    title:''我是商品333''
                },
                {
                    aid:''4'',
                    title:''我是商品4444''
                }
            ]
         };
    }
    render() {
        return (
            
            <div>

                我是商品组件

                 <ul>
                    {

                        this.state.list.map((value,key)=>{

                            return (
                                <li key={key}>                                   
                                    <Link to={`/productcontent?aid=${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                    
                </ul>
            </div>
        );
    }
}

export default Product;

详情组件

import React, { Component } from ''react'';

//url模块来解析url地址    在react里面使用url模块需要安装url模块    cnpm install url --save
import url from ''url'';


class ProductContent extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    //生命周期函数
    componentDidMount(){



        // this.props.location.search


        //获取get传值

        console.log(url.parse(this.props.location.search,true));

        var query=url.parse(this.props.location.search,true).query;

        console.log(query)

        

    }
    render() {
        return (
            
            <div>

                我是商品详情组件
            </div>
        );
    }
}

export default ProductContent;

nginx 适配react-router browserRoute 路由问题

nginx 适配react-routerbrowserRoute 路由问题

绝对能用的一篇nginx配置，文末直接有文件，伸手党直接拿走

本文环境比较复杂，首先两层nginx转发，并且访问路径也不是根路径。加上对nginx一知半解，各路搜索一看，全程懵逼。最终没有一个能用的。最后还是靠同事帮助，文档大法结束加班。本文知识点：location优先级，nginx资源文件寻找方式，rewrite 重定向问题。

location 优先级

= 开头表示精确匹配
^~ 开头表示uri以某个常规字符串开头，理解为匹配 url路径即可。nginx不对url做编码，因此请求为/static/20%/aa，可以被规则^~ /static/ /aa匹配到（注意是空格）。以xx开头
~ 开头表示区分大小写的正则匹配以xx结尾
~* 开头表示不区分大小写的正则匹配以xx结尾
!~和!~*分别为区分大小写不匹配及不区分大小写不匹配的正则
/ 通用匹配，任何请求都会匹配到。

try_file 使用

当用户请求 http://localhost/example 时，这里的 $uri 就是 /example。
try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example（其中 $root 是项目代码安装目录）的文件，就直接把这个文件的内容发送给用户。
显然，目录中没有叫 example 的文件。然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/example/ 的目录。
又找不到，就会 fall back 到 try_files 的最后一个选项 /index.php，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.php。

适配react-router browserrouter配置

首先文件存放路径是子目录 /usr/local/services/app_logical_server-1.0/bin/app/screen
访问路径是 https://example.com/app/screen/

错误的nginx 配置

    server {
        listen       8080;
        root  /usr/local/services/app_logical_server-1.0/bin/app/screen;
        location ~* \.(gif|jpg|png|js|css)$ {
          root /usr/local/services/app_logical_server-1.0/bin/app/screen/;
        }
        location ^~ /app/screen {
          root   html;
          index  index.html;
          try_files $uri $uri/ /index.html;
        }

    }

错误点

错误现象是index.html可以找到，但是index.html中的js写的是相对路径，导致所有的静态资源文件也进入了第二个location，导致页面白屏。
分析如下。

1.优先级问题

首先匹配 =，其次匹配^~, 其次是按文件中顺序的正则匹配，最后是交给 / 通用匹配。当有匹配成功时候，停止匹配，按当前匹配规则处理请求。
~* 的优先级低于 ^~所以第一个配置静态资源文件虽然写在前面，还是不会进去的。

2. server root 配置错误

解决优先级问题后，问题依然存在。原因就是这个。root 在server和location中都有，都是配置文件开始寻找的根路径，如果url是https://xxxx:8084/app/screen，location中的配置优先级高于server。首先会进入第二个location中,寻找文件，文件路径是root和域名后面的路径的拼接，例如：访问路径是 https://example.com/app/screen/umi.js，server root 为 /usr/local/services/app_logical_server-1.0/bin/app/screen。 nginx寻找文件的地址为/usr/local/services/app_logical_server-1.0/bin/app/screen/app/screen/umi.js.当然找不到，报404错误。

正确的配置

    server {
        listen       8084;
        root  /usr/local/services/app_logical_server-1.0/bin/;
        location ~* \.(gif|jpg|png|js|css)$ {
            root  /usr/local/services/app_logical_server-1.0/bin;
        }
        location ~* /app/screen {
          #try_files $uri $uri/ /usr/local/services/app_logical_server-1.0/bin/app/screen/index.html;
          root  /usr/local/services/app_logical_server-1.0/bin;
          try_files /app/screen/index.html =404;
        }
    }

不带`/`的url重定向问题

当前配置还有个问题，就是末尾不带斜杠时，index.html可以加载到，但是html中的资源文件写的相对路径，当url 为https://example/app/screen时，相对路径为https://example/app，以js为例，https://example/app/umi.js,所以报404错误。
解决方案为，利用location优先级，再加一个 = /app/screen 的location 。

    location = /sa/screen {
        rewrite ^([^.]*[^/])$ $1/ permanent;
        port_in_redirect off;
    }

但是到此还没结束。因为业务需要，本层nginx前面还有一层Nginx。所以301 重定向的时候，会带上端口号。导致找不到请求。port_in_redirect off; 配置可以解决此问题

最终版完美配置

server {
        listen       8084;
        root  /usr/local/services/app_logical_server-1.0/bin/;
        location = /sa/screen {
            rewrite ^([^.]*[^/])$ $1/ permanent;
            port_in_redirect off;
        }
        location ~* \.(gif|jpg|png|js|css)$ {
            root  /usr/local/services/app_logical_server-1.0/bin;
        }
        location ~* /app/screen {
          #try_files $uri $uri/ /usr/local/services/app_logical_server-1.0/bin/app/screen/index.html;
          root  /usr/local/services/app_logical_server-1.0/bin;
          try_files /app/screen/index.html =404;
        }
    }

React Router 1.0.0 发布，ReactJS 路由解决方案

React Router 1.0.0 发布，此版本主要是围绕 API 进行改进，重写了整个代码基础库，处理一些用例，比如路由加载，基于 session 的路由匹配，服务器渲染，集成 redux 和 relay 等等。

主要 API 改进

导入

// v0.13.x
var Router = require(''react-router'');
var Route = Router.Route;
// v1.0
var ReactRouter = require(''react-router'');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
// or using ES Modules
import { Router, Route } from ''react-router'';

渲染

// v0.13.x
Router.run(routes, (Handler) => {
  render(<Handler/>, el);
})
// v1.0
render(<Router>{routes}</Router>, el)
// looks more like this:
render((
  <Router>
    <Route path="/" component={App}/>
  </Router>
), el);
// or if you''d rather
render(<Router routes={routes}/>, el)

位置

// v0.13.x
Router.run(routes, Router.BrowserHistory, (Handler) => {
  render(<Handler/>, el);
})
// v1.0
import createBrowserHistory from ''history/lib/createBrowserHistory''
let history = createBrowserHistory()
render(<Router history={history}>{routes}</Router>, el)

更多改进内容请看发行说明。

下载：https://github.com/rackt/react-router/archive/v1.0.0.zip

React Router 一个用于 React.js 的路由解决方案（routing solution）。它轻松可以同步你的 app 和 URL，同时给嵌套，转换，和服务端渲染一流的支持。

特性：

嵌套视图映射到嵌套路由
模块化构建路由层级
同步和异步转移挂钩
转换中止/重定向/重试
动态 segments
查询参数
当 .active 类的路由活动时可以自动链接
Multiple root routes
Hash 或 HTML5 历史（含备份) URLs
声明重定向路由
声明未找到路由
浏览器滚动行为带有转变效果

今天关于React Router 路由解决方案和react路由详解的分享就到这里，希望大家有所收获，若想了解更多关于# react-router v4 刷新出现找不到页面(NO FOUND)解决方案、15.React路由 react-router4.x 动态路由以及get传值 React中使用url模块、nginx 适配react-router browserRoute 路由问题、React Router 1.0.0 发布，ReactJS 路由解决方案等相关知识，可以在本站进行查询。

本文标签：