记录记录刚刚碰到的诡异的事情，在controller 的方法中最后return 是重定向redirect到一个参数，这个参数的内容是从数据库中获取的内容，是一个app下载的地址。可不知道为啥我自己这边运行都可以跳转到这个下载地址，但别人那里就不行，后来发现我的 return “redirect: “冒号后面加了一个空格，去掉空格后在别人那里就可以了，我自己这边是去不去掉都可以的，所以到现在我也不明白到底是咋回事￣□￣｜｜

当用户访问某界面时，该界面并不存在，此时用Redirect重定向，重新跳到一个我们自定义的组件里。



一、基础

1、引入使用

// 如果loggedIn 为 false, 则重定向跳转到 /home 页面

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/home"/>
  ) : (
    <User />
  )
)}/>

<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>

二、DOME
1、目录结构
| - index.js
| - components
	| - App      =>   App.js
	| - Home     =>   Home.js
	| - About    =>   About.js
	| - News      =>   News.js

2、源码
./index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';
ReactDOM.render(<App />, document.getElementById('root'));

./components/App/App.js
import React , { Component } from 'react';
import { BrowserRouter as Router, Route, NavLink, Switch, Redirect } from 'react-router-dom';
import Home from '../Home/Home';
import About from '../About/About';
import News from '../News/News';

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <li><NavLink to="/">Home</NavLink></li>
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/news">News</NavLink> </li>   <br/>

          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/about" component={About} />
            <Route path="/news" component={News} />
            <Redirect from="/*" to="/" />
          </Switch>
          
        </div>
      </Router>
    );
  }
}

export default App;





./components/About/About.js
import React, { Component } from 'react';

export default class About extends Component {
    render() {
        return (
            <div>
            	<h2>About</h2>
            </div>
        );
    }
}

./components/New/New.js
import React, { Component } from 'react';

export default class News extends Component {
    render() {
        return (
           <div>
               <h2>News</h2>
           </div>
        );
    }
}

3、show
（1）一切功能都是正常，点击About或News就跳转到 About 或 New界面


（2）但当我要在url中，访问： http://localhost:3000/Login

页面立即会重新跳转，跳转回home界面

redirect 不仅能重定向到本项目的接口中，

return "redirect:/index";

也能重定向到外面指定接口(url)

return "redirect:" + this.getRequestCodeUrl(WeChat.REDIRECT_URL);

spring 注解中 不能有@ResponseBody，否则无法重定向

forward和redirect是什么？

是servlet种的两种主要的跳转方式。forward又叫转发，redirect叫做重定向。

区别：（本地效应次数）

地址栏，数据共享，应用场景，效率，本质，次数

两者的区别总结：

1. 从地址栏显示来说：

1）forword是服务器内部的重定向，服务器直接访问目标地址的 url网址，把里面的东西读取出来，但是客户端并不知道，因此用forward的话，客户端浏览器的网址是不会发生变化的。

2）redirect是服务器根据逻辑，发送一个状态码，告诉浏览器重新去请求那个地址，所以地址栏显示的是新的地址。

2。 从数据共享来说：

1）由于在整个定向的过程中用的是同一个request，因此forward会将request的信息带到被重定向的jsp或者servlet中使用。即可以共享数据

2）redirect不能共享

3. 从运用的地方来说

1）forword 一般用于用户登录的时候，根据角色转发到相应的模块

2） redirect一般用于用户注销登录时返回主页面或者跳转到其他网站

4。 从效率来说：

1）forword效率高，而redirect效率低

5. 从本质来说：

forword转发是服务器上的行为，而redirect重定向是客户端的行为

 



6. 从请求的次数来说：

forword只有一次请求；而redirect有两次请求，

 



再举一个浅显易懂的例子：



转发的时候你并不知道A局有没有去联系B局，信息没有被泄露，没有丢失！！

 

 

欢迎留言点赞！！