Question

我正在尝试使用ReactJs和Laravel构建CRUD项目。当我在“添加页面”上并单击“添加”时，我希望它重定向到主页或所需的任何页面。那我该怎么办呢？我在互联网上搜索后，从“反应路由器”中找到了“ browserHistory”，但由于React的新版本，它似乎不存在。

这是我的代码：

Example.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import {Link,BrowserRouter as Router, Route } from "react-router-dom";
import CreatePost from './CreatePost';
import RoutePath from '../routes/RoutePath';

export default class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {posts: []};
    }
    componentWillMount(){
        axios.get('http://127.0.0.1:8000/posts')
            .then(response => {
                this.setState({ posts: response.data });
            })
            .catch(function (error) {
                console.log(error);
            })
    }
    postRow(p){
        return (
            <tr key = {p.id}>
                <td>{p.title}</td>
                <td>{p.description}</td>
                <td>
                </td>
                <td>
                </td>
            </tr>
        )
    }
    render() {
        const posts = this.state.posts.map(post => this.postRow(post));
        return (
                <div>
                    <table border="1">
                        <thead>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        { posts }
                        </tbody>
                    </table>
                    <div>
                         <Link to='/add-post'>Add</Link>
                    </div>
                </div>

        );
    }
}

CreatePost.js

import React, { Component } from 'react';
import axios from 'axios';
import ReactDOM from "react-dom";
import Example from "./Example";
import RoutePath from "../routes/RoutePath";

export default class CreatePost extends Component{
    constructor(props){
        super(props);
        this.state = {postTitle: '', postDescription: ''};

        this.titleChange = this.titleChange.bind(this);
        this.descriptionChange = this.descriptionChange.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(e){
        e.preventDefault();
        const post = {
            title: this.state.postTitle,
            description: this.state.postDescription
        }
        let uri = 'http://127.0.0.1:8000/posts';
        axios.post(uri,post).then((response) => {
            //browserHistory.push('/');
        });
    }
    titleChange(e){
        this.setState({
            postTitle: e.target.value
        })
    }
    descriptionChange(e){
        this.setState({
            postDescription: e.target.value
        })
    }
    render(){
        return(
                <form onSubmit={this.handleSubmit} method="POST">
                    <label>Title: </label>
                    <input type="text" onChange={this.titleChange}/>
                    <br/>
                    <label>Description: </label>
                    <textarea onChange={this.descriptionChange}></textarea>
                    <br/>
                    <input type="submit" value="add"/>
                </form>
        )
    }
}

RoutePath.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter, Switch } from "react-router-dom";
import CreatePost from '../components/CreatePost';
import Example from '../components/Example';
//import Edit from '../components/Edit';

export default class RoutePath extends Component{
    render(){
        return(
            <BrowserRouter>
                    <Switch>
                        <Route exact path='/' component={Example}/>
                        <Route path='/add-post' component={CreatePost}/>
                        <Route path='/edit' component={Edit}/>
                    </Switch>
            </BrowserRouter>
        )
    }
}
ReactDOM.render(
    <RoutePath />
    , document.getElementById('homepage')
);

Answer 1

您可以在switch语句中使用Redirect。如果没有路由匹配，则应重定向

<Switch>
    <Route exact path='/' component={Example}/>
    <Route path='/add-post' component={CreatePost}/>
    <Route path='/edit' component={Edit}/>
    <Redirect to={"/"} />
</Switch>

如果您想走一条特定路线，只需将其推入历史记录即可：

this.props.history.push(url);

这应该有所帮助：The Hitchhiker’s Guide to React Router v4

重定向到首页或任何页面

1 个答案: