1.什么是Router
路由（Routing）就是把信息从源地址传输到目的地址的活动。
在前端通过修改页面路径实现Router时有三种方法可以不刷新页面就能达到不同的URL的方法：
1.1 第一种 window.loaction.hash 方法：
使用方法：首先定义hash ,在使用useState获取hash,渲染不同页面时对应不同的hash
function App() {
let hash = window.location.hash;
let initUi = hash === "signup" ? "登录" : "注册";
let [ui, setUi] = useState(initUi);
let onClickLogin = () => {
setUi("登录");
window.location.hash("/login");
};
let onClickSignUp = () => {
setUi("注册");
window.location.hash("/signup");
};
return (
<div className="App">
<button onClick={onClickLogin}>登录</button>
<button onClick={onClickSignUp}>注册</button>
<div>{ui === "注册" ? <Box1 /> : <Box2 />}</div>
</div>
);
}
1.2 第二种 window.loaction.pathname 方法：
这种方法会刷新页面，所以不推荐使用
1.3 第三种 window.history.pushState方法：
【注意】
* 后端将所有路径都向前端时才使用这个方法
* 如果后端程序员水平低，不满足上一条时不能使用
* 另一种条件下，可以使用该方法，就是自己写后端。
window.history.pushState的使用方法举例：
function App() {
let hash = window.location.hash;
let initUi = hash === "#signup" ? "登录" : "注册";
let [ui, setUi] = useState(initUi);
let onClickLogin = () => {
setUi("登录");
window.history.pushState(null, " ", "/login");
};
let onClickSignUp = () => {
setUi("注册");
window.history.pushState(null, " ", "/signup");
};
return (
<div className="App">
<button onClick={onClickLogin}>登录</button>
<button onClick={onClickSignUp}>注册</button>
<div>{ui === "注册" ? <Box1 /> : <Box2 />}</div>
</div>
);
}
以上三种方法用法相似，其中第三种方法时专门用来做Router的方法。
- 实现三种路由的方法：
function Box1() {
return <div className="box">注册</div>;
}
function Box2() {
return <div className="box">登录</div>;
}
function Welcome() {
return <div className="box">欢迎</div>;
}
function App() {
let path = window.location.pathname;
let initUi = path === "";
if (initUi === "/welcome") {
initUi = "欢迎";
} else if (initUi === "/login") {
initUi = "登录";
} else {
initUi = "注册";
}
let [ui, setUi] = useState(initUi);
let onClickLogin = () => {
setUi("登录");
window.history.pushState(null, " ", "/login");
};
let onClickSignUp = () => {
setUi("注册");
window.history.pushState(null, " ", "/signup");
};
let onClickWelcome = () => {
setUi("欢迎");
window.history.pushState(null, " ", "/welcome");
};
let showUi = () => {
if (ui === "登录") {
return <Box2 />;
} else if (ui === "注册") {
return <Box1 />;
} else {
return <welcome />;
}
};
return (
<div className="App">
<button onClick={onClickLogin}>登录</button>
<button onClick={onClickSignUp}>注册</button>
<button onClick={onClickWelcome}>欢迎</button>
<div>{showUi()}</div>
</div>
);
}
这种方法存在缺陷： 如果URL太多了使用循环语句太麻烦，下面来介绍以下攻克这个问题的方法：react router（正则表达式）
2. react-router
是完整的 React 路由解决方案，保持UI 与URL 同步，地址栏变页面就变，页面变地址栏响应地改变。
2.1 安装和配置 react-router
- 如果在浏览器使用路由，则推荐安装 react-route-dom npm安装链接【https://reacttraining.com/react-router/web/guides/quick-start】
- 引入变量
import {
BrowserRouter as Router,
Route,
Link,
} from "react-router-dom";
- ReactDOM.render函数中最顶端创建 <Router></Router>组件，然后在这个组件中创建<Link to="/URL">About</Link> 组件和<Route path="/URL"></Route>组件，最后在<Route></Route>组件中在创建页面中想要现实的组件；别忘了声明函数组件
function Users() {
return <h2>Users</h2>;
}
具体用法示例：
import React, { useState } from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Route,
Link,
} from "react-router-dom";
import "./styles.css";
function Box1() {
return <div className="box">注册</div>;
}
function Box2() {
return <div className="box">登录</div>;
}
function Welcome() {
return <div className="box">欢迎</div>;
}
function App() {
return <div className="App">APP</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<Router>
<div>
<div>
<Link to="/"><button>首页</button></Link> |
<Link to="/login"><button>注册</button></Link> |
<Link to="/signup">登录</Link> |
<Link to="/welcome">欢迎</Link>
</div>
<Route path="/" exact component={App} />
<Route path='/login' component={Box1} />
<Route path='/signup' component={Box2} />
<Route path='/welcome' component={Welcome} />
</div>
</Router>,
rootElement
);
网友评论