标签：imp javascrip 创建组 this info 入口 项目 link 打开
1. BrowserRouter和HashRouter的区别
1）BrowserRouter as Router表示使用Router就是使用BrowserRouter
2）<Route exact path="/" component={Landing} />exact表示指定path只有在访问‘/‘的时候才展示component={Landing}里面的组件,这个属性可选择性使用
3） HashRouter 表示使用Router是使用HashRouter
4） BrowserRouter 和 HashRouter 都可以实现前端路由的功能，区别是前者基于rul的pathname段，后者基于hash段。
react-router-dom
2）安装 npm i -S react-router-dom 3）引入 在项目的App.js或者index.js中引入
1. 创建项目
1）cmd打开命令行。
2）使用create-react-app 项目名 【创建项目】。
3）cd 创建的项目名进入项目目录，cnpm i react-router-dom -S 搭建路由环境。
2. 在src目录下创建index.js文件，用来获取目标元素渲染页面
import React from ‘react‘;
//引入渲染DOM方法
import ReactDOM from ‘react-dom‘;
//导入App文件
import App from ‘./App‘;
//获取目标元素渲染页面
ReactDOM.render(<App></App>,document.querySelector("#root"))
3. 在src目录下创建App.js入口文件
//引入React
import React from ‘react‘;
//引入路由依赖
import {HashRouter,Link,Route} from ‘react-router-dom‘;
//导入首页文件(Home.js)
import Home from "./component/Home";
//导入新闻文件(News.js)
import News from "./component/News";
//导入关于我们文件(about.js)
import About from "./component/About";
//创建组件命名为App,继承React.Component组件。
class App extends React.Component{
//要传到新闻的二级路由内容
newsVal(){
return("newsVal")
}
//要传到关于我们的二级路由内容
aboutVal(){
return("we are family!")
}
//渲染方法
render(){
return(
// 使用HashRouter方法，注意，一个项目中只能由一个<HashRouter/>标签
<HashRouter>
<h1>这是根目录Father</h1>
{/* 设置路由名称 */}
<Link to="/home">首页</Link>
<Link to={`/news/fire/${this.newsVal()}`}>新闻</Link>
<Link to={`/about/famliy/${this.aboutVal()}`}>关于我们</Link>
<hr/>
{/* 对应路由名称跳转到相应的页面 */}
<Route path="/home" component={Home}></Route>
<Route path="/news/:type/:id" component={News}></Route>
<Route path="/about/:type/:id" component={About}></Route>
</HashRouter>
);
}
}
//导出App,向外暴露自己
export default App;
4. 在src目录下新建一个component文件夹，用来放二级路由文件
5. 在component目录下创建Home.js首页二级路由需要的js文件
import React from "react";
//创建组件
class Home extends React.Component{
//通过构造函数，继承获取传递过来的数据
constructor(props){
super();
//创建state状态赋值为继承过来的类型，需要时可以调用
this.state={
p:props.match.params
}
}
render(){
return (
<React.Fragment>
<h1>首页</h1>
//调用类型获取其中数据
<p>{this.state.p.type}--{this.state.p.id}</p>
</React.Fragment>
);
}
}
//向外暴露导出组件
export default Home;
6. 在component目录下创建News文件，新闻二级路由需要的js文件
import React from "react";
class News extends React.Component{
constructor(props){
super();
this.state={
p:props.match.params
}
}
render(){
return (
<React.Fragment>
<h1>新闻</h1>
<p>{this.state.p.type}----{this.state.p.id}</p>
</React.Fragment>
);
}
}
export default News;
7.在component目录下创建About.js文件，关于我们 二级路由需要的js文件
import React from "react";
class About extends React.Component{
render(){
return (
<React.Fragment>
<h1>关于我门</h1>
</React.Fragment>
);
}
}
export default About;
标签：imp javascrip 创建组 this info 入口 项目 link 打开
原文地址：https://www.cnblogs.com/xiaobu-wu/p/12092711.html
