React-router-dom

安装

yarn add react-router-dom

import { BrowserRouter as Router,Switch,Route,Link } from "react-router-dom"; 

function App() {
  return (
    <Router>
    <div className="App">
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li> 
           <li>
            <Link to="/stated">users</Link>
          </li>
        </ul>
      </nav>

//注意！！！这里的匹配必须是根路径放在最后面，也就是Route /的放在最后面
           <Switch>
        <Route path="/stated">
          <h2>stated</h2>
         <Stated />
         </Route>
        <Route path="/">
          <h2>home</h2>
           <Home page="home" obj={{url:'xxx.jpg',title:'app to avatar'}}></Home>
        </Route>
      </Switch>


    </div>

    </Router>
  );
}

---

嵌套路由

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

function Topic() {
  let { topicId } = useParams();
  return <h3>Requested topic ID: {topicId}</h3>;
}

function Topics() {
  let match = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>
            Props v. State
          </Link>
        </li>
      </ul>
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  );
}

---

细节

• router 主要有和
• route 有和
• navigation

上面的列子是使用了BrowserRouter的，导入的时候设置了别名Router
使用这种情况的话，上线时候，服务端必须做出相应的配置
HashRouter的话是http://example.com/#/your/page类型的哈希值的

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

NavLink和Link的区别在于，如果是激活当前路径的话，会增加一个激活的样式类，这个类自己定义
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
<Redirect to="/login" /> //重定向

Reference link:https://reacttraining.com/react-router/web/guides/primary-components

---

可以封装一个

import React from 'react';
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends React.Compoent{
    render(){
        return (
            <NavLink {...this.props}  activeClass="active"/>
        );
    }
}

---

向路由组件传递参数

one.js
<route path="/home/:id" component={A} />

two.js
this.props.match.params.id 可以获取到