1)安装react-router到项目中
npm install react-router-dom -S
2)配置路由实现页面切换
import React, { Component } from 'react'; import { BrowserRouter,Route,Link} from 'react-router-dom'; import Home from './view/Home'; import Login from './view/Login'; import Logout from './view/Logout'; import './index.css'; class App extends Component { render() { return ( // 路由配置必须放在BrowserRouter之内 <BrowserRouter> <header>React Router v4 Browser Example</header> {/* 设置导航 */} <div> <ul> <li><Link to="/">首页</Link></li> <li><Link to="/login">Login</Link></li> <li><Link to="/logout">Logout</Link></li> </ul> </div> {/* 设置路由,实现页面切换 */} <div> <Route path="/" exact component={Home}></Route> <Route path="/login" component={Login}></Route> <Route path="/logout" component={Logout}></Route> </div> </BrowserRouter> ); } } export default App;
<BrowserRouter>
使用 HTML5 提供的 history API (pushState
, replaceState
和 popstate
事件) 来保持 UI 和 URL 的同步。
<HashRouter>
使用 URL 的 hash
部分(即 window.location.hash
)来保持 UI 和 URL 的同步。
<Link>为应用提供声明式的、可访问的导航链接。
<NavLink>一个特殊版本的 <Link>
,它会在与当前 URL 匹配时为其呈现元素添加样式属性。
<Prompt>用于在位置跳转之前给予用户一些确认信息。当你的应用程序进入一个应该阻止用户导航的状态时(比如表单只填写了一半),弹出一个提示。
<MemoryRouter>将 URL 的历史记录保存在内存中的 <Router>
(不读取或写入地址栏)。在测试和非浏览器环境中很有用,例如 React Native。
<Redirect>使用 <Redirect>
会导航到一个新的位置。新的位置将覆盖历史堆栈中的当前条目,例如服务器端重定向(HTTP 3xx)。
<Route>
可能是 React Router 中最重要的组件,它可以帮助你理解和学习如何更好的使用 React Router。它最基本的职责是在其 path
属性与某个 location 匹配时呈现一些 UI。