react-router笔记1：最简单的路由使用

我们已经使用 create-react-app 搭建了自己的react项目，并且知道了基本语法，我们会发现这些在我们实际开发中是不够的，我们不可能把一个项目所有页面全部通过显示隐藏的处理方式去做，react为我们开发提供了路由处理，如果你用过angular-router或者angular-ui-router或者vue-router，这个你就不会陌生。

路由是实现是什么呢？很简单就是根据地址的变化就显示不同的页面！

1.安装react-router

在我们的my-app下执行命令，安装这个模块：

npm install react-router

npm install react-router-dom

等待完成！使用的版本，因为版本不同，使用也会有所区别：

2.初始化的路由配置

官方文档：https://reacttraining.com/react-router/web/guides/quick-start

我们在顶部引入路由模块，在render使用：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  browserRouter as Router,Route,Link
} from 'react-router-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class App extends React.Component {
	   
	render() {
		
		return <div>我是首页</div>
	}
	
}


ReactDOM.render(
	 <Router>
		<div>
		  <ul>
			<li><Link to="/">App</Link></li>
		  </ul>
		
		  <hr/>
		
		  <Route exact path="/" component={App}/>
		</div>
	</Router>,document.getElementById('root')
);

registerServiceWorker();

效果：

使用非常简单，还是jsx的写法，不过要包裹在Router的组件上，我们分析效果可知道：

<Link to="/">App</Link>解析为a标签

<Route exact path="/" component={App}/>会被设置的组件替换

3.做一个简单的官网demo

一般的官网包含：

首页

新闻

关于我们

我们作为举例：

写好这三个组件，配置路由：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  browserRouter as Router,Link
} from 'react-router-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Home extends React.Component {
	   
	render() {
		
		return <div>我是首页</div>
	}
	
}
//设置组件
class News extends React.Component {
	   
	render() {
		
		return <div>新闻页面</div>
	}
	
}
//设置组件
class About extends React.Component {
	   
	render() {
		
		return <div>关于我们</div>
	}
	
}

ReactDOM.render(
	 <Router>
		<div>
		  <ul>
			<li><Link to="/">Home</Link></li>
			<li><Link to="/News">News</Link></li>
			<li><Link to="/About">About</Link></li>
		  </ul>
		
		  <hr/>
		
		  <Route exact path="/" component={Home}/>
		  <Route exact path="/News" component={News}/>
		  <Route exact path="/About" component={About}/>
		</div>
	</Router>,document.getElementById('root')
);

registerServiceWorker();

4.模块化我们的组件

还是用我们的官网作为例子，我们提炼修改：

index.js:

我们会把render的代码封装到app.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  browserRouter as Router,} from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
//组件 主要框架结构
import App from './App.js';

ReactDOM.render(
	 <Router>
		<App />
	</Router>,document.getElementById('root')
);

registerServiceWorker();

app.js

主页面，这里我们有我们的导航和变化显示结构

import React,{ Component } from 'react';
import {
  Route,Link
} from 'react-router-dom';

//组件 各个组件
import Home from './page/Home.js';
import News from './page/News.js';
import About from './page/About.js';


class App extends Component {
  render() {
    return (
		<div>
			<ul>
				<li><Link to="/">Home</Link></li>
				<li><Link to="/News">News</Link></li>
				<li><Link to="/About">About</Link></li>
			</ul>
			
			<hr/>
			
			<Route exact path="/" component={Home}/>
			<Route exact path="/News" component={News}/>
			<Route exact path="/About" component={About}/>
		</div>
    );
  }
}

export default App;

Home.js

各个页面：

import React,{ Component } from 'react';

class Home extends Component {
  render() {
    return <div>首页</div>
  }
}

export default Home;

News.js

import React,{ Component } from 'react';

class News extends Component {
  render() {
    return <div>新闻中心</div>
  }
}

export default News;

About.js

import React,{ Component } from 'react';

class About extends Component {
  render() {
    return <div>关于我们</div>
  }
}

export default About;

我们把这些页面对应的组件放在一个page目录下，结构清晰：

原文地址：https://www.jb51.cc/react/302687.html