首先, 我们打开已经构建完成的 React 项目目录
我们删去 src 目录下的所有文件, 创建 index.JS 文件, 内容如下:
- import React from 'react';
- import ReactDOM from 'react-dom';
- import App from './App';
- ReactDOM.render(<App/>, document.getElementById('root'));
然后创建 App.JS 文件, 内容如下:
- import React from 'react';
- import { BrowserRouter as Router,Route} from 'react-router-dom';
- import Home from './Home';
- import Page1 from './Page1';
- import Page2 from './Page2';
- import Page3 from './Page3';
- class App extends React.Component {
- render(){
- return(
- <Router>
- <div>
- <Route path="/" component={Home} />
- <Route path="/Page1" component={Page1} />
- <Route path="/Page2" component={Page2} />
- <Route path="/Page3" component={Page3} />
- </div>
- </Router>
- )
- }
- }
- export default App;
在上方的 import 中, 载入了 BrowserRouter as Router 和 Route, 其意思就是从 react-router-dom 包中导入 Router 和 Route,BrowserRouter 是 Router 中的一种.
然后, 下面依次引入了 Home,Page1,Page2,Page3 这四个组件, 组件的内容之后会给出.
在组件的 render 函数的 return 里面, 我们可以看到一对 < Router > 标签包含了四个 < Route > 标签, 每个 < Route > 标签中都包含了 path 属性和 component 属性, path 属性用于储存路径, 就是网站主页路径后面的内容, 假如网站地址是 localhost:3000, 那么, locahost:3000 后面的字符串就是 path 属性的内容.(注意, Router 只能有一个子组件, 所以要把所有 Route 标签用一个 div 包裹起来)
然后是 component 属性, 其中储存了组件名称, 当我们访问特定地址时就会渲染该组件, 也可以称其为这一个路由的入口组件, 可以由这个组件延伸开来搭建页面.
Home 组件的内容如下 (Home.JS):
- import React from 'react';
- class Home extends React.Component{
- render(){
- return(
- <div>
- <div>This is Home!</div>
- </div>
- );
- }
- }
- export default Home;
用于显示 div 标签中的 This is Home! 语句.
Page1-Page3 组件类似, 内容为:
- import React from 'react';
- class Page1 extends React.Component{
- render(){
- return(
- <div>
- <div>This is Page1!</div>
- </div>
- );
- }
- }
- export default Page1;
然后我们就可以来尝试一下访问这些页面, 比如, 我们在浏览器地址栏中输入 localhost:3000/ 即可.
我们访问 /Page1 路径的时候会渲染 Home 组件的内容. 这是因为 Home 组件所在路由的 path 为 "/", 而 "/Page1" 开头包含了 "/",React 就会默认渲染 Home 组件.
如果想在访问其他地址时不显示 Home 组件, 可以在 Home 组件所在 Route 标签中加入 exact , 如下:
- <div>
- <Route exact path="/" component={Home} />
- <Route path="/Page1" component={Page1} />
这样一来, 当我们访问 localhost:3000/Page1 时就不会默认渲染 Home 组件.
关于 Page2,Page3 的访问也是一样, 现在为止, 我们可以通过输入地址的方式进行访问, 但依然不够方便, 那么我们就要设置一些访问入口, 也就是传统页面中 "超链接" 所在地.
我们在 Home 组件中做如下更改:
- import React from 'react';
- import {
- Link
- } from 'react-router-dom';
- class Home extends React.Component{
- render(){
- return(
- <div>
- <div>This is Home!</div>
- <div>
- <Link to="/Page1/" style={
- {
- color:'black'
- }
- }>
- <div > 点击跳转到 Page1</div>
- </Link>
- <Link to="/Page2/" style={
- {
- color:'black'
- }
- }>
- <div > 点击跳转到 Page2</div>
- </Link>
- <Link to="/Page3/" style={
- {
- color:'black'
- }
- }>
- <div > 点击跳转到 Page3</div>
- </Link>
- </div>
- </div>
- );
- }
- }
- export default Home;
首先, 我们要在上方用 import 引入一个 Link 组件, 这个组件由 react-router-dom 内部定义, 用于链接跳转, 在 render 函数的 return 中设置 3 对 Link 标签, to 后面填写 Page1 的地址 ("/Page1/","/Page1" 皆可), 并包含跳转链接的文字.
现在, 我们访问 localhost:3000/ 可以看到:
点击其中一个链接就可以跳转到特定的页面, 比如 Page1:
注意, 这里的跳转并没有访问新的 html 文件, 而是由 React 改变了原本 HTML 页面中的内容.
现在, 我们已经成功地使用 Router,Route 和 Link 实现了 React 页面跳转的功能.
本文来自 React 答疑 https://www.html.cn/qa/react/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/react/14402.html