coderwhy_React Router

// 原先的href为https://lchblog.xyz/
// 赋值
window.location.hash = '123'
// 地址会变为https://lchblog.xyz/#123

// 2.监听hashchange
window.addEventListener("hashchange", () => {
  switch(location.hash) {
    case "#/home":
      routerViewEl.innerHTML = "home";
      break;
    case "#/about":
      routerViewEl.innerHTML = "about";
      break;
    default:
      routerViewEl.innerHTML = "default";
  }
})

<div id="app">
  <a href="/home">home</a>
  <a href="/about">about</a>
  <div class="router-view"></div>
</div>

<script>
  // 1.获取router-view
  const routerViewEl = document.querySelector(".router-view");

  // 2.监听所有的a元素
  const aEls = document.getElementsByTagName("a");
  for (let aEl of aEls) {
    aEl.addEventListener("click", (e) => {
      e.preventDefault();
      const href = aEl.getAttribute("href");
      console.log(href);
      history.pushState({}, "", href);
      historyChange();
    })
  }

  // 3.监听popstate和go操作
  window.addEventListener("popstate", historyChange);
  window.addEventListener("go", historyChange);

  // 4.执行设置页面操作
  function historyChange() {
    switch(location.pathname) {
      case "/home":
        routerViewEl.innerHTML = "home";
        break;
      case "/about":
        routerViewEl.innerHTML = "about";
        break;
      default:
        routerViewEl.innerHTML = "default";
    }
  }

</script>

const Home = () => (
  <div>
    <h2>Home：第一种渲染方法</h2>
  </div>
);
{/*......*/}
<Route path="/" exact component={Home}></Route>

// router.js
<Route path="/about" render={()=><div>关于页面</div>} />
<Route path="/demo" render={(props)=><Demo {...props} />} />                          

// Demo.js
const Demo = (props)=>{
  console.log(props) //可以读到props的信息:
	return(
  	<div>
    	Demo
    </div>
  )
}

// 在匹配时，容器的calss是light，<Home />会被渲染
// 在不匹配时，容器的calss是dark，<About />会被渲染
<Route path='/home' children={( match ) => (
    <div className={match ? 'light' : 'dark'}>
      {match ? <Home/>:<About>}
    </div>
  )}/>

import "./Router.css"
...
<NavLink to="/form" activeClassName="hurray">
  Form
</NavLink>
<NavLink to="/form" activeStyle={{color: 'red'}}> // 第二种形式
  Form
</NavLink>

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/profile" component={Profile} />
  <Route path="/:userid" component={User} />
  <Route component={NoMatch} />
</Switch>

<Route strict exact path="/counter/:id" component={Counter}></Route>

<Route strict exact path="/counter/:id?" component={Counter}></Route>

<Route strict exact path="/counter/:id?/:name?" component={Counter}></Route>

// 法1
const nameParams = new URLSearchParams(this.props.location.search);
console.log(nameParams.get("name"));
// 法2
const nameParams = querystring.parse(this.props.location.search);
console.log(nameParams); // {?name:"233"}

<Link
  to={{
    // /tab?sort=name#the-hash
    pathname: "/tab",
      search: "?sort=name",
        hash: "the-hash", 
          state: { // 隐形传递参数
            flag: "flag",
              mine: "mine",
          },
          }}
  >
  TabControl
</Link>

<Route path="/list/:id" component={List} />

<li><Link to="/list/123">列表</Link> </li>

// List.jsx
console.log(this.props.match)

// 关键代码
{countList.map((item) => {
  return (
    <li key={item.bookId}>
      <Link to={`/counter/${item.bookId}`}>
        {item.bookName},{item.price}
      </Link>
    </li>
  );
})}

// 访问/form，则会跳转到/counter
<Redirect from="/form" to="/counter"></Redirect>
<Route path="/form" component={Form}></Route>

// App.js
<Switch>
  ...其他Route
  <Route path="/login" component={Login} />
  <Route component={NoMatch} />
</Switch>

// User.js
render() {
  return this.state.isLogin ? (
    <div>
      <h2>User</h2>
      <h2>用户名: coderwhy</h2>
    </div>
  ): <Redirect to="/login"/>
}

// 子组件form.js
<button onClick={this.backClick}>回到home</button>
backClick = () => {
  this.props.history.push("/"); // push是叠加的，上一页面还存在
  this.props.history.replace("/"); // 是替换，上一页面不存在
};

// 父组件是Form.jsx，子组件是FormItem.jsx
// 父组件有被路由管理，而子组件没有，则在子组件中加入
import { withRouter } from "react-router-dom";
...
export default withRouter(FormItem);

import { Prompt } from "react-router-dom";
<Prompt when={!!name} message="数据未保存，是否要离开" />
<input
  type="text"
  value={name}
  onChange={(e) => this.setState({ name: e.target.value })}
  />

npm install react-router-config

// router.jsx
let routeConfig = [
  { path: "/book", title: "Book页面", exact: true, component: Book },
  { path: "/tab", title: "tab页面", exact: false, component: TabControl },
  {
    path: "/course",
    title: "课程页面",
    exact: false,
    component: Course,
  },
];
...
// 循环Link
<ul>
  {routeConfig.map((item) => {
    return (
      <li>
        <Link key={item.path} to={item.path}>
          {item.title}
        </Link>
      </li>
    );
  })}
</ul>

// 循环Route
<Switch>
  {routeConfig.map((item) => {
    return (
      <Route
        exact={item.exact}
        key={item.path}
        path={item.path}
        component={item.component}
        />
    );
  })}
</Switch>