react路由

安装

npm i react-router-dom@5.0

 

路由传参

<NavLink to="/details/abc">详情abc</NavLink>|


<Route path="/details/:id" component={Details}></Route>

获取参数

function Details({match,location}){
    return (<div>
        <h1>详情内容</h1>
        <p>参数：{match.params.id}</p>
        <p>match:{JSON.stringify(match)}</p>
        <p>location:{JSON.stringify(location)}</p>
    </div>);
}

子路由

function Admin() {
    return (<div>
        <h1>Admin页面</h1>
        <p>
            <NavLink to="/admin/dash">概览</NavLink>|<NavLink to="/admin/orderlist">订单列表</NavLink>
        </p>
        <Route path="/admin/dash" component={Dash}></Route>
        <Route path="/admin/orderlist" component={OrderList}></Route>
        <Redirect from="/admin" to="/admin/dash"></Redirect>//在子路由中配置重定向Redirect，可控制子路由默认显示页面
    </div>)
}

路由守卫

// 把props.children 解构为children   ...rest 剩余的其他参数
function Private({ children, ...rest }) {
    // 把Private组件的参数除了children全部转移到Route组件
    // Route不直接指定component通过render渲染出来
    return (<Route {...rest} render={
        ({ location }) => {
            // 如果获取得到了，返回children 子节点Admin 否则 返回一个Redirect组件
            // Redirect 默认跳转到 /login登录页面 传入一个state数据 redirect自定义值 location.pathname(本来要跳转的地址)
            return localStorage.getItem("isLog") ? (children) : <Redirect to={{ pathname: "/login", state: { redirect: location.pathname } }}></Redirect>
        }
    }>
    </Route>)
}

404页面

<Switch>
    <Route path="/" component={Home} exact></Route>
    <Route path="/about" component={About}></Route>
    {/*匹配任意路径*/}
    <Route path="*" component={NoMatch}></Route>
</Switch>



//404页面
function NoMatch({ location }) {
    return (<div>
        <h3>404</h3>
        <p>当前地址找不到：{location.pathname}</p>
        <NavLink to="/">首页</NavLink>
    </div>)
}