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

下面是我失败的场景

如果用户选择项目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>
        )
    }
}

从“React”导入React；
从“react bootstrap”导入{Navbar、Nav、NavItem、MenuItem}；
从“react router bootstrap”导入{LinkContainer}；
导入“/App.css”；
从“/NetworkGraphForm”导入NetworkGraphForm；
从“vivagraphjs”导入Viva；
从“ngraph.toDot”导入toDot；
从'react router dom'导入{Link}；
//从“/index.d.ts”导入d3；
//从“React”导入React，{Component}
导入“./App.css”
从“/networkgraphing”导入网络图形
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.toggleAddNetworkGraph=this.toggleAddNetworkGraph.bind（this）；
this.addNetworkGraph=this.addNetworkGraph.bind（this）；
}
TogleAddNetworkGraph（e）{
e、 预防默认值（）；
this.props.mappedtogleaddNetworkGraph（）；
}
添加网络图（e）{
e、 预防默认值（）；
const form=document.getElementById（'addNetworkGraphForm'）；
console.log（'form is'）
console.log（表单）
log（'networkGraphName'，form.networkGraphName.value）
log（'networkgraphdisc'，form.networkgraphdisc.value）
log（'graphType'，form.graphType.value）
if（form.networkGraphName.value！==“”&form.networkGraphDesc.value！==“”）{
const data=新表单数据（）；
if（form.graphType.value=='1'）{
设graph=Viva.graph.generator（）.wattsStrogatz（parseInt（form.n.value）、parseInt（form.k.value）、parseFloat（form.p.value））；
var dotContent=toDot（图）；
data.append（'dotValue'，JSON.stringify（dotContent））
log（'追加前'，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（数据）
for（data.values（）的var值）{
console.log（值）；
}//console.log（this.props）
//console.log（这个）
this.props.mappeddNetworkGraph（数据）；
form.reset（）；
}否则{
返回；
}
}
render（）{
console.log（this.props.mappedAppState）
const appState=this.props.mappedAppState
返回(
家
网络图
添加网络图
{appState.showAddNetworkGraph&&
}
{/*每个较小的组件*/}
{this.props.children}
)
}
}

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

---

谢谢。

您可以使用window.open

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

它会重定向你的应用程序，但会破坏你的单页应用程序。

---

在React应用程序中，您不想发出新的HTTP请求，但这取决于您

但是，它没有显示下一页。实际上，我将重定向到新页面，但该页面是空的。