react路由操作指南

一、安装启动react项目

控制台cmd输入指令

react-router-dom

使用npm start启动react项目

 

二、使用react项目

在App.js中导入路由组件

创建普通路由

完整代码

import {HashRouter as Router,Route,NavLink} from "react-router-dom";
function App() {
  return (
    <Router>
      <div className="nav">
        <NavLink to="/" exact>首页</NavLink>|
        <NavLink to="/about">关于页面</NavLink>|
      </div>
      <div className="views">
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
      </div>
    </Router>
  );
}
export default App;
 
function Home() {
  return (
    <div>
      <h1>首页</h1>
    </div>
  );
}
function About() {
  return (
    <div>
      <h1>关于页面</h1>
    </div>
  );
}

路由传参

 

 

 获取参数

添加子路由
 

添加路由守卫
 

对需要添加路由守卫的页面进行处理
 

 添加404页面