import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/expenses" element={<Expenses />} />
      <Route path="/invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/product/:id" element={<ProductDetails/>}></Route>
        <Route path="/home" element={<StudentList />}></Route>
      </Routes>
    </Router>
  );
}

<BrowserRouter>
 <Route path="/" component={ Home } />
 <Route path="/product" component={ Product } />
</BrowserRouter>

<BrowserRouter> 
 <Switch>
    <Route path="/" element={<Home />} /> 
    <Route path="/product" element={<Product />} />
 </Switch>
</BrowserRouter>

<Routes>
    <Route path='/foo' element={Foo}>
        <Route path='bar' element={Bar}></Route>
        <Route path='*' element={NotFound}></Route>
    </Route>
</Routes>

<NavLink to="/" activeClassName='active-menu'>
        <i className="fa fa-dashboard"></i>
        <span>首页</span>
    </NavLink>

<NavLink
	to="/faq"
	className={({ isActive }) =>
	  isActive ? 'active' : ''
	}
>
  首页
</NavLink>

<NavLink to="/product/1" style={({ isActive }) => {
          return {
            fontWeight: "bold",
            color: isActive ? "red" : ""
          };
}}

<Route path='/about' element={<About />}>
    <Route index element={<Address />} />
    <Route path='address' element={<Address />}></Route>
    <Route path='information' element={<Information />}></Route>
    <Route path='joinus' element={<Join />}></Route>
</Route> 

export default class about extends Component {
  render() {
    return (
      <div className='container'>
        <h2>关于</h2>
        <div>
            <div className="left">
               <ul>
                <li><Link to='/about/address'>公司地址</Link></li>
                <li><Link to='/about/join'>加入我们</Link></li>
                <li><Link to='/about/story'>背景故事</Link></li>
               </ul>
            </div>
            <div className="left">
                <Outlet/>
            </div>
        </div>
      </div>
    )
  }
}

let router  =[{
  path: "/home",
  element :<Home/ >,
  children: [
    {
    path:"",
    element:<News/>
    },
    {
    path: " news " ,
    element:<News/>
    }
  ]
}]

const GetRoutes=()=>{
    return useRoutes([
      {
        path:'/',
        element:<Home/>
      },
      {
        path:'/home',
        element:<Home/>
      },
      {
        path:'/product',
        element:<Product/>
      },
      {
        path:'/about',
        element:<About/>,
        children:[
          {
            path:"",
            element:<Story/>
          },
          {
            path:'address',
            element:<Address/>
          },
          {
            path:'join',
            element:<Join/>
          },
          {
            path:'story',
            element:<Story/>
          }
        ]
      },
      {
        path:'/concat',
        element:<Concat/>
      },
      {
        path:'/brand',
        element:<Brand/>
      }
    ])
}
function App() {
  return (
    <div>
      <Router>
       <Nav></Nav>
       <GetRoutes/>
          {/* <Routes>
          <Route path='/' element={<Home/>}></Route>
          <Route path='/home' element={<Home/>}></Route>
          <Route path='/product' element={<Product/>}></Route>
          <Route path='/about' element={<About/>}>
                <Route index element={<Story/>}></Route>
               <Route path='address' element={<Address/>}></Route>
               <Route path='join' element={<Join/>}></Route>
               <Route path='story' element={<Story/>}></Route>
          </Route>
          <Route path='/concat' element={<Concat/>}></Route>
          <Route path='/brand' element={<Brand/>}></Route>
        </Routes>*/}
      </Router> 
    </div>
  );
}
export default App;

import {useNavigate} from "react-router-dom";
const navigate = useNavigate();
//push
navigate("/welcome");

import { useNavigate } from "react-router-dom";

export default function A() {

const navigate = useNavigate();

//...

}

<BrowserRouter>
    <Routes>
        <Route path='/foo/:id' element={Foo} />
    </Routes>
</BrowserRouter>

import { useParams } from 'react-router-dom';
export default function Foo(){
    const params = useParams();
    return (
        <div>
            <h1>{params.id}</h1>
        </div>
    )
}

import { useSearchParams } from 'react-router-dom';

// 当前路径为 /foo?id=12
function Foo(){
    const [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('id')) // 12
    setSearchParams({
        name: 'foo'
    }) // /foo?name=foo
    return (
        <div>foo</div>
    )
}

<NavLink to={`detail`} state={{
 id:item.id, 
 name:item.name, 
 content: item.content }}>
   {item.name}
</NavLink>

import React from 'react'
import { useLocation } from 'react-router-dom'

export default function Detail() {
  // 这是连续结构赋值 把useLocation里面呢的state解构，在解构state里面的属性
  const {state:{id,name,content}} = useLocation()
  return (
    <div>
     <ul>
        <li>id:{id}</li>
        <li>content:{content}</li>
        <li>name:{name}</li>
     </ul>
    </div>
  )
}

<Router>
    <SideBar>
        <Routes>
            <Route></Route>
        </Routes>
    </SideBar>
    <Main>
        <Routes>
            <Route></Route>
        </Routes>
    </Main>
</Router>

var menuInfo = [
         {
             menuId: 2,
             menuName: "用户管理理",
             menuUrl: "/index/user",
             pathRoute:'user',
             pathname: "userlist",
             componentPath: "user/UserManger",
             menuImgClass: 'TeamOutlined',
             pId:0,
             menuState: "0",
             isContainChildren:false,
             menuChilds: [{
                 menuId: 10,
                 menuName: "添加用户",
                 menuUrl: "/index/user/adduser",
                 pathRoute:'adduser',
                 pathname: "adduser",
                 componentPath: "user/AddUser",
                 menuImgClass: 'VideoCameraAddOutlined',
                 pId:2,
                 menuState: "0",
                 isContainChildren:false,
                 menuChilds: []
             },{
                 menuId: 11,
                 menuName: "修改用户",
                 menuUrl: "/index/user/modifyUser",
                 pathRoute:'modifyUser',
                 pathname: "modifyUser",
                 componentPath: "user/ModifyUser",
                 menuImgClass: 'VideoCameraAddOutlined',
                 pId:2,
                 menuState: "0",
                 isContainChildren:false,
                 menuChilds: []
             }]
         },
         {
             menuId: 3,
             menuName: "角色管理理理",
             menuUrl: "/index/role",
             pathRoute:'role',
             pathname: "role",
             componentPath: "user/RoleManger",
             menuImgClass: 'WhatsAppOutlined',
             pId:0,
             menuState: "0",
             isContainChildren:true,
             menuChilds: [
                 {
                     menuId: 7,
                     menuName: "添加角色",
                     menuUrl: "/index/role/addrole",
                     pathRoute:'addrole',
                     pathname: "addrole",
                     componentPath: "user/AddRole",
                     menuImgClass: 'VideoCameraAddOutlined',
                     pId:3,
                     menuState: "0",
                     isContainChildren:false,
                     menuChilds: []
                 },
                 {
                     menuId: 8,
                     menuName: "角色详情",
                     menuUrl: "/index/role/roleInfo",
                     pathRoute:'roleInfo',
                     pathname: "roleInfo",
                     componentPath: "user/RoleInfo",
                     menuImgClass: 'TagOutlined',
                     isContainChildren:false,
                     pId:3,
                     menuState: "0",
                     menuChilds: []
                 },
                 {
                     menuId: 9,
                     menuName: "角色列表",
                     menuUrl: "/index/role/rolelist",
                     pathRoute:'rolelist',
                     pathname: "rolelist",
                     componentPath: "user/RoleList",
                     menuImgClass: 'StarOutlined',
                     pId:3,
                     menuState: "0",
                     isContainChildren:false,
                     menuChilds: []
                 }
             ]
         }
     ];

// 用于创建路由(可以根据数据，生成动态的路由)
import {useRoutes} from 'react-router-dom'
import Login from '../pages/Login'
import Home from '../pages/Home'
// react 动态加载组件 @loadable/component
import loadable from '@loadable/component'
import {observer,inject} from 'mobx-react'
const PrivateRoute = (props)=>{
   function bindRouter(list){
    let arr = [];
      list.map((item)=>{
        const ComponentNode = loadable(()=>{
            return import("./"+item.componentPath)
        })
          if(item.menuChilds && item.menuChilds.length>0){
            if(item.isContainChildren){
                arr.push({
                    path:item.pathRoute,
                    element:<ComponentNode/>,
                    children:[...bindRouter(item.menuChilds)]
                })
            }else{
                arr.push({
                    path:item.pathRoute,
                    //element:<ComponentNode/>
                    children:[...bindRouter(item.menuChilds)]
                })
            }
           
          }else{
          
            arr.push({
                path:item.pathRoute,
                element:<ComponentNode/>
            })
          }
      })
      return arr;
   }

   const menuInfo = props.user.userInfo.menuInfo ? props.user.userInfo.menuInfo:[];
    return useRoutes([
        {
            path:"/",
            element:<Login/>
        },
        {
            path:"/index",
            element:<Home />,
            children:[...bindRouter(menuInfo)]
        }
    ])
}

export default inject('user')(observer(PrivateRoute));