在react里如何进行路由的配置呢?
需要用到的插件 create-react-app
、react-router-dom
。
1.根据create-react-app
脚手架进行项目的搭建
传送门,如何使用脚手架搭建 → create-react-app
2.安装插件
yarn add react-router-dom
3.在src文件夹下创建pages文件夹,内涵三个 .JSX
组件
About.jsx
//about.js
import React, { Component } from "react";
export default class About extends Component {
render() {
return <h1>欢迎,这里是About</h1>;
}
}
Home.jsx
//about.js
import React, { Component } from "react";
export default class About extends Component {
render() {
return <h1>欢迎,这里是Home</h1>;
}
}
Error.jsx
//about.js
import React, { Component } from "react";
export default class About extends Component {
render() {
return <h1>欢迎,这里是Error</h1>;
}
}
4.修改app.js文件
//引入react jsx写法的必须
import React from "react";
//引入需要用到的页面组件
import Home from "./pages/Home";
import About from "./pages/About";
import Error from "./pages/Error";
//引入一些模块
import {
BrowserRouter as Router,
Switch,
Route,
NavLink
} from "react-router-dom";
function router() {
return (
<Router>
<NavLink to="/home"> home |</NavLink>
<NavLink to="/about"> about</NavLink>
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/" to="/home" component={Home} exact />
<Route path="*" component={Error} />
</Switch>
</Router>
);
}
export default router;
此时,简单的路由就已实现。
效果如下:
打开项目时:
由于配置了Redirect
,在项目运行时会默认匹配 /home
路径的路由。显示相应的组件
点击about时:
当点击about
就会进行路由的相对路径切换,到/about
路径的路由,显示相应的组件
在地址栏里随便输入时:
就行进行Error
组件的显示