react 路由

1.安装路由

在我们创建好的项目中安装路由 

npm i react-router-dom@5.0

2.启动项目

npm start

3.导入路由相关的组件

import { HashRouter as Router, Route, NavLink } from "react-router-dom";

4.创建首页和关于页面

function Home() {
  return (
    <div>
      <h1>首页内容</h1>
    </div>
  );
}
//创建关于页面
function About() {
  return (
    <div>
      <h1>关于页面</h1>
    </div>
  );
}

注意所有的路由都要写在

<Router></Router>

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>
  );
}

完整代码如下

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>
  );
}

这样我们就和可以实现页面切换的效果

5.带参数路由

//导入路由相关的组件

//HashRouter哈希路由 as起别名 router路由

//router 存放路由的容器

//navlink 导航链接

// Redirect 重定向

// Switch一次匹配一个页面

<NavLink to="/details/123">123详情</NavLink> |

<Route path="/details/:id" component={Details}></Route>

6.配置子路由

function Admin(){
  return <div>
    <h1>Admin页面</h1>
    <p><NavLink to="/admin/dash">概览</NavLink> |<NavLink to="/admin/orderlist">订单列表</NavLink> </p>
    <Route path="/admin/dash" component={Dash}></Route>
    <Route path="/admin/orderlist" component={OrderList}></Route>
    <Redirect from='/admin' to="/admin/dash"></Redirect>
  </div>
}