Router学习

Author: introvert-y

src/page/About/index.js

@@ -0,0 +1,9 @@
+// 验证路由传参
+
+import React from 'react';
+
+function Page({location}) {
+  return (<h2>About: { location.query ? location.query.name : 'No Click' }</h2>);
+}
+
+export default Page;

src/router/index.js

@@ -1,89 +1,115 @@
 import React from "react";
-import { HashRouter ,BrowserRouter, Route, Link,Switch } from "react-router-dom";
+import { BrowserRouter, Route, Link,Switch } from "react-router-dom";
 import Home from '../page/CssTest/index'
+// import About from '../page/About/index'
+
 import Counter from '../page/Counter/index'
 import Single from '../page/Single/index'
 
-
+function Header() {
+  return (
+    <ul>
+      <li>
+        <Link to="/">css避免全局渲染方案</Link>
+      </li>
+      <li>
+        <Link to={{ pathname:"/about" , query: { name: 'Anny' } }}>路由query传单个属性</Link>
+      </li>
+      <li>
+        <Link to={`/practice?data=${encodeURIComponent(JSON.stringify({
+          name: 'IG',
+          sex: 'man',
+        }))}`} >
+          路由query传一个对象
+        </Link>
+      </li>
+      <li>
+        <Link to={{ pathname:"/test" , params: { name: 'Ming' } }}>路由params传参</Link>
+      </li>
+      <li>
+        <Link to="/queryChildren">嵌套路由</Link>
+      </li>
+      <li>
+        <Link to="/counter">全局状态共享计数器操作</Link>
+      </li>
+      <li>
+        <Link to="/single">计数器显示</Link>
+      </li>
+    </ul>
+  );
+}
 
 function App() {
-  // const [count, setCount] = useState(0);
- 
   return (
-    <HashRouter>
+    // basename 为路由前添加前缀
+    // <BrowserRouter basename={'/douyu'}>
+    <BrowserRouter>
       <div>
         <Header />
-        <div>
+        <Switch>
             <Route exact path="/" component={Home} />
             <Route path="/about" component={About} />
-            <Route path="/hasChildren" component={HasChildren} />
+            <Route path="/practice" component={Practice} />
+            <Route path="/test" component={Test} />
+            <Route path="/queryChildren" component={QueryChildren} />
             <Route path="/counter" component={Counter} />
             <Route path="/single" component={Single} />
-        </div>
-        
+        </Switch>
       </div>
-    </HashRouter>
+    </BrowserRouter>
   );
 }
 
+function Practice({ location }) {
+  console.log(JSON.parse(new URLSearchParams(location.search).get('data')));
+  if (!location.search ) {
+    return 'No Click';
+  }
+  const data = JSON.parse(new URLSearchParams(location.search).get('data'));
+  return Object.keys(data).map((item) => (
+    <div key={item}>
+      {item} : {data[item]}
+    </div>
+  ))
+}
+
+function About({ location }) {
+  return (<h2>About: { location.query ? location.query.name : 'No Click' }</h2>);  
+}
 
-function About({location}) {
-console.log(location);
-  return (<h2>About: { location.query ? location.query.name : 'no more' }</h2>);
+function Test({location}) {
+  return (<h2>Test: {location.params ? location.params.name : 'No Click' }</h2>);
 }
 
-function ItemDetails() {
-    return <h2>ItemDetails</h2>;
-  }
 
-function Topic() {
-  return <h3>Components</h3>;
+function SonQuery({ location }) {
+  // console.log('SonQuery', location);
+  if (location.query) {
+    return location.query.name;
+  } else  if (location.params) {
+    return location.params.name;
+  } 
+  return <h3> No Click</h3>;
 }
 
-function HasChildren({ match }) {
-    console.log(match);
+function QueryChildren({ match }) {
   return (
     <div>
-      <h2>Topics</h2>
-
+      <h2>嵌套路由</h2>
       <ul>
         <li>
-          <Link to={`${match.path}/Components`}>Components</Link>
+          <Link to={{ pathname:`${match.path}/apple` , query: { name: '苹果' } }}>苹果</Link>
         </li>
         <li>
-          <Link to={`${match.path}/itemDetails`}>itemDetails</Link>
+          <Link to={{ pathname:`${match.path}/putao`, params: { name: '葡萄' } }}>葡萄</Link>
         </li>
       </ul>
-
-      {/* <Route path={`${match.path}/:id`} component={Topic} /> */}
       <Switch>
-         <Route path='/hasChildren/ItemDetails' component={ItemDetails} />  
-         <Route path='/hasChildren/' component={Topic} />
+        <Route path={`${match.path}/`} component={SonQuery} />
+        <Route path={`${match.path}/putao`} component={SonQuery} />
       </Switch>
     </div>
   );
 }
-    
-function Header() {
-  return (
-    <ul>
-      <li>
-        <Link to="/">Home</Link>
-      </li>
-      <li>
-        <Link to={{ pathname:"/about" , query: { name: 'Anny' } }}>About</Link>
-      </li>
-      <li>
-        <Link to="/hasChildren">HasChildren</Link>
-      </li>
-      <li>
-        <Link to="/counter">Counter</Link>
-      </li>
-      <li>
-        <Link to="/single">single</Link>
-      </li>
-    </ul>
-  );
-}
 
 export default App;