路由、组件类型、link组件、路由传值

散星寥落
154 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

router（路由）

React Router被拆分成三个包：react-router,reactc-dom和react-routet-native（APP）。react-router提供核心的
路由组件与函数。其余两个则提供运行环境（即浏览器与react-native）所需的特定组件

react router中有三种类型的组件：路由组件，路由匹配组件和导航组件

如果在使用路由调用时，调用的组件是显示类型组件，就用纯函数组件，调用的组件功能性比较多就用类组件

Router4中的组件类型

<BrowserRouter>：使用HTML5提供的history来保持UI和URL的同步
<Hashrouter>:使用URl的hash（例如：window.location.hash）来保持UI和URL同步
<MemoryRouter>：能在内存保存你URL的历史记录（并没有对地址栏编写）
<NativeRouter>：未使用React Native提供路由支持
<StaticRoucter>：从不会改变地址

路由器

路由器常用<BrowserRouter>和<HashRouter>两种组件
可以将各种组件及标签放进<Router>组件中，他的角色更像是Redux中的<Provider>不同的是<provider>是用来保持与
Store的更新，而<Router>是用来保持与locaiton的同步
与之前的Router不同，这里<Router>组件只允许存在一个子元素，存在多个会报错

1.png

2.png

3.png

link组件

4.png

5.png

注意：isActive给一个导航添加所有的导航都会有对应方法，普遍用来进行传值
实例：
<NavLink to='/' activeClassName="" activeStyle={{fontSize:20,color:'#f00'}} isActive={showmsg}></NavLink>

6.png

             <Switch>
                <Route exact path='/' component={Home} />
                <Route path='/a' component={Classes} />
                <Route path='/b' component={Teacher} />
                <Route path='/c' component={Work} />
            </Switch>

7.png

如果有服务器端的动态支持，建议使用BrowserRouter，否则建议使用HashRouter

路由传值

8.png

所有的路由信息都存在与props中
match.url获取当前路由的路径

9.png

this.props.match.aprams.paramName
export const Nav=()=>(
    <Router>
        <div className="nav">
            <p>
                <Link to='/'>首页</Link>|
                <Link to='/about'>关于我们</Link>|
                <Link to='/course/css'>课程介绍</Link>|
                <Link to='/course/js'>课程介绍2</Link>|
            </p>
            <hr/>
            <Route exact path='/' component={Home}/>
            <Route path='/about' component={About}/>
            <Route path='/course/:names' component={Course}/>
        </div>
    </Router>
)
const Course=({match})=>(
    <div>
        <h2>课程介绍</h2>
        <p>你选择了:{match.params.names}课</p>
    </div>
)
avatar
文章
阅读
粉丝