我想使用 react 创建一个基本的 Web 应用程序。我已经实现了创建按钮。我想在单击按钮时重定向到另一个页面。下面是我的应用程序.js代码
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<p>
<buttontoolbar>
<button const path = '/Components'> Click Me </button>
</buttontoolbar>
</p>
</header>
</div>
);
}
export default App;
当我单击"单击我"按钮时，它应该重定向到组件.js。下面是组件的代码.js
import React from "react"
function app(){
return(
<p>
Welcome to the world.
</p>
)
}
export default app
很久以前，我已经在 ASP.NET 年做了这些事情之王，在那里我用Response.redirect重定向页面，这很简单。由于我是 React 的新手，我对此一无所知。在 React 中有类似的东西吗？
基本上 React 没有"页面"。这个想法更多的是"显示"或"隐藏"组件，这给用户一个页面/视图的印象。
在 React 中实现路由的最简单方法是使用声明式路由器库，例如 react 路由器，特别是对于更复杂的应用程序。
这是一个没有反应路由器的例子来理解基本概念：
const ViewOne = ({onClick}) => (
<div>
View 1 <br />
<button onClick={() => onClick("view2")}>Go to view 2</button>
</div>
);
const ViewTwo = ({onClick}) => (
<div>
View 2 <br />
<button onClick={() => onClick("view1")}>Go to view 1</button>
</div>
);
const App = () => {
const [currentView, setCurrentView] = React.useState("view1");
return (
<div>
{
currentView === "view1" ?
<ViewOne onClick={page => setCurrentView(page)} /> :
<ViewTwo onClick={page => setCurrentView(page)} />
}
</div>
);
};
const domContainer = document.querySelector('#my-app');
ReactDOM.render(<App />, domContainer);<div id="my-app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>尝试Linkreact-router-dom组件，并将to作为路径传递给它，无论您想在onClick上重定向到哪里。
import { Link } from 'react-router-dom'
和例如。
<Link to={'/Components'}>
<button > Click Me </button>
</Link>
const {Link, BrowserRouter} = window.ReactRouterDOM
function App(){
return (
<BrowserRouter>
<button><Link to='/abc' target='_blank'> Click Me </Link></button>
</BrowserRouter>
)
}
ReactDOM.render(<App/>, document.getElementById("root"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<body><div id="root"></div></body>使用react-router-dom包来定义路由，然后在按钮的 onClick 事件上使用下面提到的方法之一。
this.props.history.push("componentpath").- 浏览器历史对象(在反应路由器包中(。
请参考此链接