Javascript 使用React从一页导航到另一页

我的网站建立在

Angular.JS

，

Node.JS

和

Mongo

上。目前，我正在尝试将前端从

Angular.JS

转换为

React.JS

这是该网站的链接（这是一个阿拉伯语单词，意思是“为我做饭”）

单击按钮时，我想从一个页面导航到另一个页面，以下是我的代码：

app.jsx

文件

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div style = {{backgroundImage: 'url(/assets/header-bg.jpg)',
            backgroundPosition: 'bottom',
            paddingTop: '10px'}}>
            <div>
            <div className="container-fluid">
            <nav className="navbar navbar-inverse" style = {{ margin: '25px 50px',
            backgroundColor: 'rgba(31, 31, 31, 0.7)',
            borderColor: '#484848',
            zIndex: '3',
            position: 'absolute'
        }}>
        <div className="container">
        <div className="navbar-header">
        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span className="sr-only">Toggle navigation</span>
        <span className="icon-bar"></span>
        <span className="icon-bar"></span>
        <span clNameass="icon-bar"></span>
        </button>
        <a className="navbar-brand" href="#/" style = {{color: "#257204"}}>Otbo5ly
        <small> beta</small></a>
        </div>
        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul className="nav navbar-nav">
        <li><a href="#/users">My Profile</a></li>
        <li><a href="#/orders">My Orders</a></li>
        <li> <a href = "#/signin">Sign In</a></li>
        <li><a href="<SignUp></SignUp>">Sign Up</a></li>
        <li><a href="#/signout">Sign out</a></li>
        </ul>
        <ul className="nav navbar-nav navbar-right">
        <li><a href="http://www.rbk.org" target="_blank">RBK</a></li>
        </ul>
        </div>
        </div>
        </nav>
        </div>
        <div>
        </div>
        </div>
        <MainPage></MainPage>
        <Router history={hashHistory}>
        <Route path='/signup' component={SignUp}>signup</Route>
        <Route path='signin' component={SignIn}>signin</Route>
        </Router>
        </div>
        )}
    }
    window.App = App;

---

我尝试了很多方法，但我认为我遗漏了一些东西，可能是库或语法，仍然不确定最佳导航方式。

假设您使用的是最新版本的React Router（4v）。试试这样的

import React,{Component} from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

class App extends Component{

    render(){
      return(
        <Link to="/signin"><input value="profile"/></Link>
           );
    }

}

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

您可以先查看教程，比如@zainabhamami它有用吗？。如果是，请选择它作为答案

import React,{Component} from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

class App extends Component{

    render(){
      return(
        <Link to="/signin"><input value="profile"/></Link>
           );
    }

}

export default App;