React路由实现项目中的导航栏功能

一.前言

以前我有介绍过使用vue路由来实现项目中的导航栏功能,在本案例中将以最基本的启发模型来使用React路由实现一样的功能,除此以外我还会介绍React的脚手架

二.React脚手架

我使用的开发工具是vscode,打开vscode,选择终端打开

1.安装脚手架

npm i create-react-app -g
复制代码

2.建立项目

create-react-app my-app
复制代码

3.启动页面

在成功建立项目后,会提示你执行相应的命令来启动页面

或者执行下面命令

yarn start app
复制代码

能够看出,相比vue来讲,React脚手架搭建项目结构仍是十分简单的

三.整理项目结构

使用脚手架搭建好结构后,通常来讲,咱们只须要修改src和public两个目录便可

下面,我在src目录只留下面两个文件,其余的均删除

Appp.js

index.js

四.测试

1.修改App.js

import React from 'react'
class App extends React.Component {
  render() {
    return (<h1>hello world</h1>)
  }
}
// 导出根组件
export default App
复制代码

2.修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root')); 复制代码

3.保存,查看页面是否显示hello world

若是成功显示,说明只留下这两个文件是没有问题的,下面正式开始实现导航栏

五.实现导航栏

1.安装路由

npm i react-router-dom
复制代码

2.修改App.js

import React from 'react';
import Home from './Componemts/Home.jsx'
import User from './Componemts/User.jsx'
import Login from './Componemts/Login.jsx'
import { HashRouter, Route, Link ,Switch} from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <HashRouter> 
        <ul>
          <li><Link to='/home'>首页</Link></li>
          <li><Link to='/user'>用户</Link></li>
          <li><Link to='/login'>登陆</Link></li>
        </ul>
        <Switch>
          <Route path='/home' component={Home}/>
          <Route path='/user' component={User}/>
          <Route path='/login' component={Login}/>
        </Switch>
      </HashRouter>
     
    </div>
  );
}

export default App;

复制代码

咱们能够看到代码中,引入了三个组件

import Home from './Componemts/Home.jsx'
import User from './Componemts/User.jsx'
import Login from './Componemts/Login.jsx'
复制代码

3.建立三个组件

在src目录下,新建一个Components目录,该目录下新建下面三个文件

//Home.jsx

import React from 'react'
class Home extends React.Component{
    render(){
        return (
            <div>我是首页</div>
        )
    }
}
export default Home
复制代码

//User.jsx

import React from 'react'
class User extends React.Component{
    render(){
        return (
            <div>我是用户页</div>
        )
    }
}
export default User
复制代码

//Login.jsx

import React from 'react'
class Login extends React.Component{
    render(){
        return (
            <div>我是登陆页</div>
        )
    }
}
export default Login
复制代码

好了到这一步,整个导航的启发模型就已经写好了,保存,刷新页面就能够看效果了

六.知识点总结

1.按需引入React组件

须要用到什么就引入什么,没有用到的就不用引入,不然可能报错

import { HashRouter, Route, Link ,Switch} from 'react-router-dom'
复制代码

2.路由容器

至于你用哪一个,能够本身选择,而在vue中,是没有路由容器的,但能够设置去掉#号

//HashRouter和BrowserRouter都是核心的路由容器
// HashRouter经过锚点来实现的，路径带了#
// BrowserRouter经过H5的history模式实现，路径不带#
复制代码

3.路由匹配规则

// 路由匹配规则相关的组件有俩
//使用Switch把一组route包裹起来，保证只显示一个组件
// Switch: 开关，
// Route: 表示一个匹配规则
复制代码

若是咱们把App.j修改为下面这样,看会有怎么样显示的效果

import React from 'react';
import Home from './Componemts/Home.jsx'
import User from './Componemts/User.jsx'
import Login from './Componemts/Login.jsx'
import { HashRouter, Route, Link ,Switch} from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <HashRouter> 
        <ul>
          <li><Link to='/home'>首页</Link></li>
          <li><Link to='/home/aa'>用户</Link></li>
          <li><Link to='/login'>登陆</Link></li>
        </ul>
          <Route path='/home' component={Home}/>
          <Route path='/home/aa' component={User}/>
          <Route path='/login' component={Login}/>
      </HashRouter>
     
    </div>
  );
}
export default App;
复制代码

在点击导航栏中的"用户"时,页面中会同时显示"首页","用户"这两个组件的内容

若是,咱们使用Switch将一组路由包起来

<Switch>
    <Route path='/home' component={Home}/>
    <Route path='/home/aa' component={User}/>
    <Route path='/login' component={Login}/>
</Switch>
复制代码

在点击导航栏中的"用户"时,页面中只会显示"首页"这个组件的内容

因此在写路由的时候,要注意这些问题

4.路由链接 Link NavLink

• Link: to属性，表示的点击这个Link，跳转到的路由， Link最终渲染成a标签
• NavLink: 做用和Link是同样的，路由跳转NavLink比Link更强大的一点是能够指定样式

5.Redirect

表示路由的重定向,使用时必定要加exact,exact表示精确匹配

咱们通常会在导航栏下面默认显示首页的内容

<Switch>
	<Redirect exact from="/" to="/home" />
    <Route path='/home' component={Home}/>
    <Route path='/user' component={User}/>
    <Route path='/login' component={Login}/>
</Switch>
复制代码

若是咱们在重定向时,不加exact,那么只要是/xxx的路由都匹配上