欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React 路由 react-router

程序员文章站 2022-07-03 15:23:52
...

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正常访问React 路由 react-router
当在后面加了个1就无法 访问了
React 路由 react-router
没有配置exact的topics正常访问
React 路由 react-router
在后面加东西也能正常访问
React 路由 react-router

Route组件

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

相关标签: react