React 路由

最新推荐文章于 2024-11-10 21:58:08 发布

原创最新推荐文章于 2024-11-10 21:58:08 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了React Router的安装及使用方法，包括BrowserRouter与HashRouter的区别，如何通过URL访问及Link组件实现页面跳转，提供了从环境搭建到具体实践的完整示例。

## 路由
参考地址：https://reacttraining.com/react-router/web/guides/quick-start

1.安装路由 npm install react-router-dom --save

2.BrowserRouter和HashRouter区别
1.表现形式不同：BrowserRouter：/ HashRouter：/#/ 指的是具体浏览器访问是 xxxx/login 还是 xxxx/#/login
2.打包发布的时候，如果是BrowserRouter，我们需要后台做重定向处理，否则刷新访问会出现404

路由第一讲:基本示例通过url直接访问地址，进行路由

目录结构

Home文件内容

import React from "react"

export default class Home extends React.Component {
    render() {
        return (
            <div>
                Home
            </div>
        )
    }
}

news文件内容

import React from "react"

export default class News extends React.Component {
    render() {
        return (
            <div>
                News
            </div>
        )
    }
}

app.js

import React from 'react';

import { BrowserRouter as Router, Route } from 'react-router-dom'

import Home from './views/Home'
import News from './views/News'

class App extends React.Component {
  render() {
    return (
      <Router>
        <Route path="/home" component={Home}></Route>
        <Route path="/news" component={News}></Route>
      </Router>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

启动项目以后就可以根据具体的路径访问到具体的内容了

路由第二讲:通过Link的方式进行跳转

基于上面的文件目录再添加两个文件

index.jsx

import React from 'react'
import "./style.css"
import { Link } from 'react-router-dom'
export default class Nav extends React.Component {
    render() {
        return (
            <div className="nav">
                <ul>
                    <li>
                        <Link to="/news">新闻</Link>
                    </li>
                    <li>
                        <Link to="/home">首页</Link>
                    </li>
                </ul>
            </div>

        )
    }
}

style.css

.nav ul{
    overflow: hidden;
    clear: both;
}

.nav ul li{
    float: left;
    margin: 0 20px;
}

.active{
    color:red;
}

修改Home.jsx和 News.jsx 引入文件

import React from "react"
import Nav from "../components/Nav"
export default class Home extends React.Component {
    render() {
        return (
            <div>
                <Nav />
                Home
            </div>
        )
    }
}

配置完成启动以后，在这两个页面的会展示两个按钮，可以跳转到不同的页面