如何在 Reactjs 的第5版中使用 Redirect

我使用的是上一个版本的 response-router 模块，名为 response-router-dom，它已经成为使用 React 开发 Web 应用程序时的默认模块。我想知道在 POST 请求之后如何进行重定向。我一直在做这个代码，但是在请求之后，什么都没有发生。我在网上查阅，但所有的数据都是关于以前版本的反应路由器，没有与最后的更新。

密码:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'


import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';


class SignUpPage extends React.Component {
constructor(props) {
super(props);


this.state = {
errors: {},
client: {
userclient: '',
clientname: '',
clientbusinessname: '',
password: '',
confirmPassword: ''
}
};


this.processForm = this.processForm.bind(this);
this.changeClient = this.changeClient.bind(this);
}


changeClient(event) {
const field = event.target.name;
const client = this.state.client;
client[field] = event.target.value;


this.setState({
client
});
}


async processForm(event) {
event.preventDefault();


const userclient = this.state.client.userclient;
const clientname = this.state.client.clientname;
const clientbusinessname = this.state.client.clientbusinessname;
const password = this.state.client.password;
const confirmPassword = this.state.client.confirmPassword;
const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };


axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
.then((response) => {
this.setState({
errors: {}
});


<Redirect to="/"/> // Here, nothings happens
}).catch((error) => {
const errors = error.response.data.errors ? error.response.data.errors : {};
errors.summary = error.response.data.message;


this.setState({
errors
});
});
}


render() {
return (
<div className={styles.section}>
<div className={styles.container}>
<img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
<SignUpForm
onSubmit={this.processForm}
onChange={this.changeClient}
errors={this.state.errors}
client={this.state.client}
/>
<Footer />
</div>
</div>
);
}
}


export default SignUpPage;

密码:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'


import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';


class SignUpPage extends React.Component {
constructor(props) {
super(props);


this.state = {
errors: {},
client: {
userclient: '',
clientname: '',
clientbusinessname: '',
password: '',
confirmPassword: ''
}
};


this.processForm = this.processForm.bind(this);
this.changeClient = this.changeClient.bind(this);
}


changeClient(event) {
const field = event.target.name;
const client = this.state.client;
client[field] = event.target.value;


this.setState({
client
});
}


async processForm(event) {
event.preventDefault();


const userclient = this.state.client.userclient;
const clientname = this.state.client.clientname;
const clientbusinessname = this.state.client.clientbusinessname;
const password = this.state.client.password;
const confirmPassword = this.state.client.confirmPassword;
const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };


axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
.then((response) => {
this.setState({
errors: {}
});


<Redirect to="/"/> // Here, nothings happens
}).catch((error) => {
const errors = error.response.data.errors ? error.response.data.errors : {};
errors.summary = error.response.data.message;


this.setState({
errors
});
});
}


render() {
return (
<div className={styles.section}>
<div className={styles.container}>
<img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
<SignUpForm
onSubmit={this.processForm}
onChange={this.changeClient}
errors={this.state.errors}
client={this.state.client}
/>
<Footer />
</div>
</div>
);
}
}


export default SignUpPage;

502642 次浏览

小开

最佳答案

< img src = { need (’./images/lisa _ main _ bg.png’)} className = { styles.fullImageBack }/>

嗨，如果您正在使用反应路由器 v-6.0.0-beta 或 V6在这个版本重定向更改导航像这样

{ renderMe ()}

从“ response-router-dom”导入{ Navigate } ;//像 v6中的 CORRECT 一样 < 页脚/>

从“ response-router-dom”导入{ Redirect } ;//如 v5中的 CORRECT 所示

);

Import { Redirect } from‘ response-router-dom’;//就像 v6中的这个错误 } } 出口默认登录页;

小开

试试这个。

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'


import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';


class SignUpPage extends React.Component {
constructor(props) {
super(props);


this.state = {
errors: {},
callbackResponse: null,
client: {
userclient: '',
clientname: '',
clientbusinessname: '',
password: '',
confirmPassword: ''
}
};


this.processForm = this.processForm.bind(this);
this.changeClient = this.changeClient.bind(this);
}


changeClient(event) {
const field = event.target.name;
const client = this.state.client;
client[field] = event.target.value;


this.setState({
client
});
}


processForm(event) {
event.preventDefault();


const userclient = this.state.client.userclient;
const clientname = this.state.client.clientname;
const clientbusinessname = this.state.client.clientbusinessname;
const password = this.state.client.password;
const confirmPassword = this.state.client.confirmPassword;
const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };


axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
.then((response) => {
this.setState({
callbackResponse: {response.data},
});
}).catch((error) => {
const errors = error.response.data.errors ? error.response.data.errors : {};
errors.summary = error.response.data.message;


this.setState({
errors
});
});
}


const renderMe = ()=>{
return(
this.state.callbackResponse
?  <SignUpForm
onSubmit={this.processForm}
onChange={this.changeClient}
errors={this.state.errors}
client={this.state.client}
/>
: <Redirect to="/"/>
)}


render() {
return (
<div className={styles.section}>
<div className={styles.container}>
<img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
{renderMe()}
<Footer />
</div>
</div>
);
}
}


export default SignUpPage;

小开

//这将使您在反应路由器和反应路由器域的 V6中出现错误

这里有一个小例子，作为对标题的回应，因为所有提到的例子是复杂的，在我看来，以及正式的一个。

您应该知道如何传送 es2015以及使您的服务器能够处理重定向。下面是一个用于表达的代码片段。更多的相关信息可以找到给你。

请确保在 package.json 中使用相同的版本

一定要把这个放在其他路线的下面。

const app = express();
app.use(express.static('distApp'));


/**
* Enable routing with React.
*/
app.get('*', (req, res) => {
res.sendFile(path.resolve('distApp', 'index.html'));
});

{

这是。Jsx 文件。注意最长路径是如何先出现的，并且得到更一般的结果。对于最一般的路由，使用精确属性。

// Relative imports
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';


// Absolute imports
import YourReactComp from './YourReactComp.jsx';


const root = document.getElementById('root');


const MainPage= () => (
<div>Main Page</div>
);


const EditPage= () => (
<div>Edit Page</div>
);


const NoMatch = () => (
<p>No Match</p>
);


const RoutedApp = () => (
<BrowserRouter >
<Switch>
<Route path="/items/:id" component={EditPage} />
<Route exact path="/items" component={MainPage} />
<Route path="/yourReactComp" component={YourReactComp} />
<Route exact path="/" render={() => (<Redirect to="/items" />)} />
<Route path="*" component={NoMatch} />
</Switch>
</BrowserRouter>
);


ReactDOM.render(<RoutedApp />, root);

小开

"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router-dom": "^4.2.2"

为了导航到另一个页面(在我的案例中是关于页面) ，我安装了 prop-types。然后将其导入到相应的组件中。我用的是 this.context.router.history.push('/about')导航系统。

“ response-router”: “ ^ 6.0.0-beta.0”,//像这样

我的原则是,

import React, { Component } from 'react';
import '../assets/mystyle.css';
import { Redirect } from 'react-router';
import PropTypes from 'prop-types';


export default class Header extends Component {
viewAbout() {
this.context.router.history.push('/about')
}
render() {
return (
<header className="App-header">
<div className="myapp_menu">
<input type="button" value="Home" />
<input type="button" value="Services" />
<input type="button" value="Contact" />
<input type="button" value="About" onClick={() => { this.viewAbout() }} />
</div>
</header>
)
}
}
Header.contextTypes = {
router: PropTypes.object
};

小开

要导航到另一个组件，可以使用 this.props.history.push('/main');

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


class Example extends Component {


redirect() {
this.props.history.push('/main')
}


render() {
return (
<Fragment>
{this.redirect()}
</Fragment>
);
}
}


export default Example

小开

“ response-router-dom”: “ ^ 6.0.0-beta.0”,//如下所示

只需在您喜欢的任何函数中调用它。

this.props.history.push('/main');

小开

}

您可以为此编写一个 hoc 并编写一个方法调用 redirect，代码如下:

import React, {useState} from 'react';
import {Redirect} from "react-router-dom";


const RedirectHoc = (WrappedComponent) => () => {
const [routName, setRoutName] = useState("");
const redirect = (to) => {
setRoutName(to);
};




if (routName) {
return <Redirect to={"/" + routName}/>
}
return (
<>
<WrappedComponent redirect={redirect}/>
</>
);
};


export default RedirectHoc;

小开

...

最近，我遇到了一个我在学习 python 和大多数教程中从未见过的语法，..符号，它看起来像这样:

f = 1..__truediv__ # or 1..__div__ for python 2


print(f(8)) # prints 0.125

);

我认为它和(当然，除了它更长) :

f = lambda x: (1).__truediv__(x)
print(f(8)) # prints 0.125 or 1//8

}

UseNavigate 导航
相对链接组件

小开

但我的问题是:

或者，您可以使用 React 条件呈现。

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


class UserSignup extends Component {
constructor(props) {
super(props);
this.state = {
redirect: false
}
}
render() {
<React.Fragment>
{ this.state.redirect && <Redirect to="/signin" /> }   // you will be redirected to signin route
}
</React.Fragment>
}

小开

怎么会这样？

或者，您可以使用 withRouter。您可以通过 withRouter高阶组件访问 history对象的属性和最接近的 <Route>的 match。withRouter将在每次呈现被包装的组件时将更新后的 match、 location和 history道具传递给它。

import React from "react"
import PropTypes from "prop-types"
import { withRouter } from "react-router"


// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}


render() {
const { match, location, history } = this.props


return <div>You are now at {location.pathname}</div>
}
}
// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

或者只是:

import { withRouter } from 'react-router-dom'


const Button = withRouter(({ history }) => (
<button
type='button'
onClick={() => { history.push('/new-location') }}
>
Click Me!
</button>
))

小开

由于 UseHistory () hook，React 路由器 v5现在允许您使用 history. push ()进行简单的重定向:

import { useHistory } from "react-router-dom"


function HomeButton() {
let history = useHistory()


function handleClick() {
history.push("/home")
}


return (
<button type="button" onClick={handleClick}>
Go home
</button>
)
}

小开

这两个点到底是什么意思？

我遇到的问题是我有一个现有的 IIS 计算机。然后我将一个静态 React 应用程序部署到它上面。使用路由器时，显示的 URL 实际上是虚拟的，而不是真实的。如果你点击 F5，它会进入 IIS，而不是 index.js，你的返回值将是404文件。我的解决方法很简单。我的应用程序中有一个公用文件夹。在该公用文件夹中，我创建了与虚拟路由相同的文件夹名。在这个文件夹中，我有一个 index.html，代码如下:

<script>
{
sessionStorage.setItem("redirect", "/ansible/");
location.href = "/";
}
</script>

现在，我们要为这个会话添加我想要的“路由”路径。然后在我的 App.js 中执行下面的操作(注意... ... 是其他代码，但是在这里做一个演示太多了) :

import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { Redirect } from 'react-router';
import Ansible from "./Development/Ansible";
import Code from "./Development/Code";
import Wood from "./WoodWorking";
import "./App.css";


class App extends Component {
render() {
const redirect = sessionStorage.getItem("redirect");


if(redirect) {
sessionStorage.removeItem("redirect");
}


return (
<Router>
{redirect ?<Redirect to={redirect}/> : ""}
<div className="App">
...
<Link to="/">
<li>Home</li>
</Link>
<Link to="/dev">
<li>Development</li>
</Link>
<Link to="/wood">
<li>Wood Working</li>
</Link>
...
<Route
path="/"
exact
render={(props) => (
<Home {...props} />
)}
/>
<Route
path="/dev"
render={(props) => (
<Code {...props} />
)}
/>
<Route
path="/wood"
render={(props) => (
<Wood {...props} />
)}
/>
<Route
path="/ansible/"
exact
render={(props) => (
<Ansible {...props} checked={this.state.checked} />
)}
/>
...
</Router>
);
}
}


export default App;

如何在更复杂的语句中使用它(如果可能的话) ？

实际使用: Chizl.com

这可能会在将来为我节省很多行代码... :)

EDIT : 从 localStorage 更改为 sessionStorage。当您关闭选项卡或浏览器时，sessionStorage 将消失，并且无法被浏览器中的其他选项卡读取。

小开

我发现在方法渲染中可以放置反应路由器的重定向组件，但是如果你想在一些验证之后重定向，举例来说，最好的重定向方法是使用老的可靠的 window.location.href，即:

evalSuccessResponse(data){
if(data.code===200){
window.location.href = urlOneSignHome;
}else{
//TODO Something
}
}

当你在编写本机应用程序时，本机应用程序永远不需要走出应用程序，打开另一个应用程序的机制是完全不同的。

小开

请确保在 package.json 中使用相同的版本 { “ response-router”: “ ^ 6.0.0-beta.0”,//像这样 “ response-router-dom”: “ ^ 6.0.0-beta.0”,//如下所示

您所拥有的是一个没有尾随零的 float文本，然后您可以访问。它本身不是一个运算符; 第一个点是 float 值的一部分，第二个点是访问对象属性和方法的点运算符。

}

这上面的东西只有在反应路由器版本6工作得很好

小开

更新为 react-router-dom v6 ，有一个用于条件重定向和 Link组件的 useNavigate钩子

import { useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';


export default function Example(): JSX.Element {
const navigate = useNavigate();


useEffect(() => {
...
if(true) { // conditional redirection
navigate('/not-found', { replace: true });
}
}, []);


return (
<>
...
<Link to="/home"> Home </Link> // relative link navigation to /home
...
</>
);
}

通过执行以下操作可以达到相同的点。

>>> f = 1.
>>> f
1.0
>>> f.__floordiv__
<method-wrapper '__floordiv__' of float object at 0x7f9fb4dc1a20>

UseNavigate 导航

另一个例子

>>> 1..__add__(2.)
3.0

相对链接组件

小开

注意: 只回答问题的题目

上一版本

<Redirect from="/old-url" to="/new-url" />