React路由使用详解

安装路由

打开cmd
在项目文件夹安装:npm i react-router-dom@5.0 -S(指定5.0版本)

导入路由的相关组件

在app.js中添加路由，导入

import {
   
  HashRouter as Router,    //HashRouter哈希路由 as起别名 router路由
  Route,                   //Route 存放路由的容器
  NavLink,                 //navlink 导航链接
  Redirect,                // Redirect 重定向
  Switch,                  // Switch一次匹配一个页面
} from "react-router-dom";

创建两个路由页面

首页页面:

//创建首页
function Home(){
   
    return (<div>
        <h1>首页内容</h1>
</div>);
}
export default Home;

分支路由页面:

function About(){
   
    return (<div>
        <h1>关于页面内容</h1>
</div>);
}
export default About;

配置路由

在需要的页面配置：

import {
   
  HashRouter as Router,
  Route,
  NavLink
} from "react-router-dom";
import Home from "./Home";
import About "./About";
function App() {
   
  return (
    <Router>
      <div className="nav">