Question

请问，React的最佳实现方法是什么？

提交表格（和..）
重定向到另一个页面（和..）
这里有一些起源的道具吗？

我发现了两种重定向方法：

原始文章：https://tylermcginnis.com/react-router-programmatically-navigate/

1）和React Router：history.push()

2）和React Router：<Redirect />

1）使用history.push()：重定向有效，但我不知道如何向重定向页面添加自定义道具。

2）使用<Redirect />：添加自定义道具有效（以这种方式）：

<Redirect to={{ pathname: '/products', state: { id: '123' } }} />

但是重定向对我不起作用，提交后我一直收到错误消息。

源代码：

import React from 'react';
import './App.css';
import { withRouter, Redirect } from 'react-router-dom'

class App extends React.Component {

    state = {
        toDashboard: false,
    }
    handleSubmit = () => {
        this.setState(() => ({
            toDashboard: true
        }));
    }
    render() {
        if (this.state.toDashboard === true) {
            return <Redirect to={{
                pathname: '/products', state: { id: '123' }
            }} />
        }

        return (
            <div>
                <h1>Register</h1>
                <form onSubmit={this.handleSubmit}>
                    <button type="submit">Submit</button>
                </form>
            </div>
        );
    }
}
export default withRouter(App);

错误：

警告：您尝试重定向到当前使用的相同路线：/products“
由于未连接表单而取消了表单提交

请问达到目标的最好方法是什么？

Answer 1

您需要取消默认的提交操作。

因此将您的handleSubmit方法更改为

handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
        toDashboard: true
    });
}

Answer 2

对我来说最后正常工作的是下面的代码。从App.js它将路由到Products.js，然后单击按钮，并将其重定向到NotFound.js，然后我可以到达道具“状态：{id：123}”，并在此处显示。希望它对正在寻找工作提交方式的人有所帮助。

App.js

import React from 'react';
import './App.css';
import { Route, Switch } from 'react-router-dom';
import Products from './Products';
import NotFound from './NotFound';
import Home from "./Home";

class App extends React.Component {
    render() {
        return (
            <div>
                <Switch>
                    <Route path="/products" component={Products} />
                    <Route path="/notfound" component={NotFound} />
                    <Route path="/" exact component={Home} />
                </Switch>
            </div>
        );
    }
}
export default App;

Products.js

import React, { Component } from "react";

class Products extends Component {    
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.history.push({ pathname: '/notfound', state: { id: 123 } });
    }

    render() {
        console.log(this.props);    
        return (
            <div>
                <h1>Products</h1>
                <form onSubmit={this.handleSubmit}>
                    <button type="submit">Submit</button>
                </form>
            </div>
        );
    }
}
export default Products;

NotFound.js

import React from "react";

const NotFound = (props) => {
    console.log(props);
    return (
        <div>
            <h1>Not Found</h1>
            <h2>{props.location.state.id}</h2>
        </div>
    );
};    
export default NotFound;

提交表单和添加道具的最佳方法是什么？

2 个答案: