您的位置: 首页  >  文章  >  React路由

React路由

分类: 文章 • 2023-11-13 15:53:22

推荐https://reacttraining.com/react-router/web/guides/quick-start
https://www.cnblogs.com/xhdx/archive/2017/07/24/7231737.html

命令：
npx create-react-app [my-app][my-app]是项目名，可替换。
cd [my-app]
npm install react-router-dom
npm start

1.react-router 中的三大组件
Router相当于一个容器，不会被渲染出来。你的其他组件都要放在Router中才能使用到react-router的功能。根据功能的不同，Router还分为BrowserRouter，MemoryRouter等。
Link被渲染称一个a标签，通常以声明式的方式被定义在应用程序中。
Route包含一个path，并指明了在path与URL匹配时要渲染的组件。
React路由
Router
如果说我们的应用程序是一座小城的话，那么Route就是一座座带有门牌号的建筑物，而Link就代表了到某个建筑物的路线。有了路线和目的地，那么就缺一位老司机了，没错Router就是这个老司机。
React路由有三种component(路由组件，路由match组件和路由导航组件)，全都要import {} from ‘react-router-dom’
BrowserRouter:当我们点击了程序中的一个链接之后,BrowserRouter就会找出与这个URL匹配的Route。

  1. basename
    有时候我们的应用只是整个系统中的一个模块，比如应用中的URL总是以 http://localhost/admin/ 开头，这种情况下我们总不能每次定义Link和Route的时候都带上admin吧？react-router已经考虑到了这种情况，所以为我们提供了一个basename属性。为BrowserRouter设置了basename之后，Link中就可以省略掉admin了，而最后渲染出来的URL又会自动带上admin。

Link
Link就像是一个个的路牌，为我们指明组件的位置。Link使用声明式的方式为应用程序提供导航功能，定义的Link最终会被渲染成一个a标签。

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

Route的三种渲染方式。

  1. component，渲染component。
<Route path="/list" component={List}/>
  1. render
    render的类型是function，Route会渲染这个function的返回值。
const renderFn = () =>{
    return <h1>render function test1</h1>
};
...
<Route path="/render" render={renderFn}/>

3.children:用的少，不说明。

所有路由中指定的组件将被传入以下三个props。

match.
location.
history.

const renderLogin = (props) =>{
    return <h1>login user is: {props.match.params.name}</h1>
};
...
<Route path='/login/:name' render={(props)=>renderLogin(props)} />

App.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import Login from './routes/Login';
import WorkFlow from './routes/WorkFlow';
import List from './routes/List';
import NewUser from './routes/NewUser';
import ResetPwd from './routes/ResetPwd';

const renderFn = () =>{
    return <h1>render function test1</h1>
};

const renderLogin = (props) =>{
    return <h1>login user is: {props.match.params.name}</h1>
};

class App extends Component {
  render() {
    return (
        <Router basename="/admin">
          <Switch>
            {/*<Route component={Login}/>*/} /*always render Login, no matter url is /login or /list*/
            <Route path='/login/:name' render={(props)=>renderLogin(props)} />
            <Route path="/list" component={List}/>
            <Route path="/workflow" component={WorkFlow}/>
            <Route path="/newUser" component={NewUser}/>
            <Route path="/resetPwd" component={ResetPwd}/>
            {/*render is a function, return result is shown in the screen*/}
            <Route path="/render" render={renderFn}/>
            {/*
              3methods to render: component,render,children
              1.component:when you have a component, should be used.
              2.render:when you should pass in-scope variables to the component you want to render, should be used.
            */}
            <div>
              <ul>
                <li><Link to='/login/tom'>login</Link></li>
                <li><Link to='/list'>documentation</Link></li>
                <li><Link to='/workflow'>workflow</Link></li>
                <li><Link to='/newUser'>new user</Link></li>
                <li><Link to='/resetPwd'>reset password</Link></li>
                <li><Link to='/render'>render</Link></li>
              </ul>
            </div>
          </Switch>
        </Router>
    );
  }
}

export default App;

其他类似于Login.js，暂时不写出来

import React,{Component} from 'react';

class Login extends Component {
    render() {
        return(
            <h1>Login</h1>
        )
    }
}

export default Login;

相关推荐