react-router-dom使用简介

　　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。

react-router-dom使用简介

猜你喜欢