React 路由 react-router

React 路由 react-router

准备工作

 npm install -g create-react-app yarn  //安装命令
  create-react-app antd-demo   //创建项目
   cd antd-demo   //进入项目
  $ yarn start    //运行
  npm i -D react-router react-router-dom  //添加路由依赖

路由组件

Router是所有路由组件共用的底层接口组件，它是路由规则制定的最外层的容器。
Route路由规则匹配，并显示当前的规则对应的组件。
Link路由跳转的组件

一般来说 Router相当于div，link相当于a标签，Route则根据link的指向路径，来设置匹配的组件。

Router组件针对不同功能和平台对应用：

<BrowserRouter> 浏览器的路由组件
<HashRouter> URL格式为Hash路由组件
<MemoryRouter> 内存路由组件
<NativeRouter> Native的路由组件
<StaticRouter> 地址不改变的静态路由组件

Demo

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

// 设置根路由
const BasicExample = () => (
    // 根路由标签
    <Router basename="/admin" getUserConfirmation={getConfirmation}>
        <div>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/topics">Topics</Link>
                </li>
            </ul>

            <hr />
            {/*// 设置跳转的组件*/}
            <Route exact path="/" component={Home} />
            <Route  path="/topics" component={Topics} />
        </div>
    </Router>
);
const getConfirmation = (message, callback) => {
    
    const allowTransition = window.confirm(message)
    callback(allowTransition)
  }
  
// 设置Home组件
const Home = () => (
    <div>
        <h2>Home</h2>
    </div>
);
// 设置 Topics组件
const Topics = ({ match }) => (
   
    <div>
        <h2>Topics</h2>
        <ul>
            <li>
                <Link to={`${match.url}/rendering`}>Rendering with React</Link>
            </li>
            <li>
                <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
            </li>
        </ul>
        // 设置一个组件，
        <Route path={`${match.url}/:topicId`} component={Topic} />
        // 设置默认组件
        <Route
            exact
            path={match.url}
            render={() => <h3>Please select a topic.</h3>}
        />
    </div>
);
// 设置二级组件
const Topic = ({ match }) => {
    console.log(match);
    return (
        <h3>{match.url}</h3>
    )
};

export default BasicExample;

basename

basename 属性可以设置根路由 basename="/admin" 根路由就为admin
后面的link 则会自动在前面加上admin 如admin/topics

forceRefresh: bool

当设置为 true 时，在导航的过程中整个页面将会刷新。 只有当浏览器不支持 HTML5 的 history API 时，才设置为 true。
当设置为 true 时，在导航的过程中整个页面将会刷新。 只有当浏览器不支持 HTML5 的 history API 时，才设置为 true。

Link组件

to

需要跳转到的路径(pathname)或地址（location）。

replace: bool

当设置为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。
当设置为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。
默认为 false。

exact: bool

此属性要求location完全匹配才会附加class和style。这里说的匹配是指地址栏中的URl和这个Link的to指定的location相匹配。
如：配置exact的Home正常访问
当在后面加了个1就无法 访问了

没有配置exact的topics正常访问

在后面加东西也能正常访问

Route组件

Route应该是react-route中最重要的组件了，它的作用是当location与Route的path匹配时渲染Route中的Component。
如果有多个Route匹配，那么这些Route的Component都会被渲染。
与Link类似，Route也有一个exact属性，作用也是要求location与Route的path绝对匹配。