文章目录
基本路由的使用
本篇的vue项目,代码涉及的主要文件有:
- 模板文件index.html
- 入口文件index.js
- 入口组件App.js
- 路由组件Home:pages/Home/index.jsx
- 路由组件About:pages/About/index.jsx
模板文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
入口文件index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
入口组件App.js
import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
<NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
<Route path="/about" component={About}></Route>
<Route path="/home" component={Home}></Route>
</div>
</div>
</div>
</div>
</div>
)
}
}
pages/Home/index.jsx(Home组件)
import React, { Component } from 'react'
export default class Home extends Component {
render() {
return (
<h2>我是Home的内容</h2>
)
}
}
pages/About/index.jsx(About组件)
import React, { Component } from 'react'
export default class About extends Component {
render() {
return (
<h2>我是About的内容</h2>
)
}
}
Redirect组件的使用
http://localhost:3000/home
时,展示Home组件;
http://localhost:3000/about
时,展示About组件。
http://localhost:3000/
时,既不展示Home组件,也不展示About组件。
现在,我们使用Redirect组件,实现:当访问http://localhost:3000/
时,重定向至http://localhost:3000/home
,即默认展示Home组件。
为此,修改App.js,主要变更内容为:新增重定向<Redirect to="/home"></Redirect>
。
import React, { Component } from 'react'
import {NavLink,Switch,Route,Redirect} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
<NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
<Switch>
<Route path="/about" component={About}></Route>
<Route path="/home" component={Home}></Route>
<Redirect to="/home"></Redirect>
</Switch>
</div>
</div>
</div>
</div>
</div>
)
}
}
启动应用,测试效果。