react嵌套路由 小demo， 通俗易懂_欢迎来到冲哥的前端博客

没办法 因为csdn上传动态图片有限制，最高只能5m 所以我操作的很快见谅

但大体的实现的效果就是这样了 相比里面的细节流程我就不一一赘述了， 看了网上的几个代码实例，毕竟不是自己写的。还是看着很难受的。 并不是通俗易懂，然后我又很长时间没写过这样原生的react代码，都是基于umi或者react的那种 约定式路由 或者配置式路由。
我直接去 react-router的官网看了 几个例子 直接改一改就好了

废话不多说了 直接上代码了

文件目录结构很简单 就是初始使用 create-react-app 脚手架创建的
一个登陆页面 一个 user 个人中心页面

首先在 App.js中

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import User from "./pages/user"
import Login from "./pages/login"

const App = props => {
  return (
    
    <Router >
      <Switch >
        <Route exact path="/" component={Login} />
        <Route path="/user"  component={User} />
      </Switch>
    </Router>
  )
}
export default App

代码很简单。然后就是 个人中心 user.js

import React from "react";
import { Route, Link, Switch } from "react-router-dom";
import About from "./components/About";
import Home from "./components/Home";
import "./user.css";
const user = (props) => {
  return (
    <div className="container">
      <div className="left">
        <div style={{ marginBottom: "20px" }}>
          <Link to="/user/home">home</Link>
        </div>
        <div style={{ marginBottom: "20px" }}>
          <Link to="/user/about">about</Link>
        </div>
        <Link to="/">首页</Link>
      </div>
      <div>
        <Switch>
          <Route exact path="/user">
              欢迎来到我的个人中心页面
          </Route>
          <Route path="/user/about" component={About} />
          <Route path="/user/home" component={Home} />
        </Switch>
      </div>
    </div>
  );
};


export default user;

那个登陆页面更简单就是一句话。我就不写了。

然后简单的嵌套路由就出来

关注我 持续更新 前端知识。