如何从react.js的一页转到另一个html文件

Question

以下是我失败的情况，

如果用户选择项目1，则页面显示特定类型的图形，而用户选择项目2，则将看到另一种图形，不幸的是，第二个图形在页面中看不到。 我创建了另一个html页面以将用户引向该页面，即RandomGraph.html，并且我使用了很多方法，但是它不起作用，即使它没有显示简单的html文件也是如此。 我使用的方式是：window.location，window.location.href，a，setTimeout等。

这是我在App.js中的代码：

import React from 'react';
import {Navbar, Nav, NavItem, MenuItem} from 'react-bootstrap';
import {LinkContainer} from 'react-router-bootstrap';
import './App.css';
import NetworkGraphForm from './NetworkGraphForm';
import Viva from 'vivagraphjs';
import toDot from 'ngraph.todot';
import { Link } from 'react-router-dom';
//import d3 from './index.d.ts';
// import React, { Component } from 'react'
import './App.css'
import NetworkGraphImg from './NetworkGraphImg'

export default class App extends React.Component{
    constructor(props){
        super(props);
        this.toggleAddNetworkGraph = this.toggleAddNetworkGraph.bind(this);
        this.addNetworkGraph = this.addNetworkGraph.bind(this);
    }

    toggleAddNetworkGraph(e){
        e.preventDefault();
        this.props.mappedToggleAddNetworkGraph();
    }

    addNetworkGraph(e){
        e.preventDefault();
        const form = document.getElementById('addNetworkGraphForm');
        console.log('form is')
        console.log(form)
        console.log('networkGraphName',form.networkGraphName.value)
        console.log('networkGraphDesc',form.networkGraphDesc.value)
        console.log('graphType',form.graphType.value)
        if(form.networkGraphName.value !== "" && form.networkGraphDesc.value!==""){
            const data = new FormData();
            if(form.graphType.value=='1'){

            let graph = Viva.Graph.generator().wattsStrogatz(parseInt(form.n.value),parseInt(form.k.value),parseFloat(form.p.value));
            var dotContent = toDot(graph);
            data.append('dotValue',JSON.stringify(dotContent))
            console.log('before appending',form.networkGraphName.value);
            data.append('networkGraphName', form.networkGraphName.value);
            data.append('networkGraphDesc', form.networkGraphDesc.value);

                data.append('attr',JSON.stringify({'graphType': form.graphType.value, 'n':form.n.value, 'K':form.k.value, 'p':form.p.value}))
            }
            if(form.graphType.value=='2'){
                window.location ="randomGraph.html";

                 }

            console.log(data)
            for (var value of data.values()) {
                console.log(value);
            }            // console.log(this.props)
            // console.log(this)
            this.props.mappedAddNetworkGraph(data);
            form.reset();
        }else {
            return;
        }
    }

    render(){
        console.log(this.props.mappedAppState)
        const appState = this.props.mappedAppState
        return(
            <div>
                <Navbar inverse collapseOnSelect className  ="customNav">
                    <Navbar.Header>
                        <Navbar.Brand>
                            <a href ="/#" >MERN Stack NetworkGraph App</a>
                        </Navbar.Brand>
                        <Navbar.Toggle/>
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav>
                            <NavItem componentClass={Link} href="/" to="/" >Home</NavItem>
                        </Nav>
                        <Nav>
                            <NavItem componentClass={Link} href="/networkGraphs" to="/networkGraphs" >Network Graphs</NavItem>
                        </Nav>
                        <Nav pullRight>
                            <NavItem componentClass={Link} href="/" to="/"  onClick={this.toggleAddNetworkGraph}>Add NetworkGraph</NavItem>
                        </Nav>
                    </Navbar.Collapse>



                </Navbar>
                <div className="container">
                    {appState.showAddNetworkGraph &&
                    <NetworkGraphForm addNetworkGraph={this.addNetworkGraph}/>
                    }
                    {/* Each Smaller Components*/}
                    {this.props.children}
                </div>

            </div>
        )
    }
}

我知道它可能是重复的，但是我没有找到任何合适的答案，谢谢您的帮助，谢谢。

Answer 1

您可以使用window.open

window.open（“ / randomGraph.html”，“ _self”）;

它会重定向您的应用程序，但会破坏您的单页应用程序。 在React应用程序中，您不想发出新的HTTP请求，但这取决于您