创建react路由

原创

是小张啊喂

修改于 2021-05-25 14:24:03

6680

修改于 2021-05-25 14:24:03

文章被收录于专栏：软件软件

学习一点简单的前端还是有很多好处的，除了能让你头疼还能让你再也不想碰这sb东西，但是程序员这种傻缺，总是在喊

要走出舒适区

硬着头皮干吧

之前使用了react-cli脚手架创建了react项目，然后玩了一下

Ant Design of React

觉得还可以，UI组件库还挺好看的，个人的话前端小白，后端还没玩明白就想玩一下前端，感觉还挺有意思的

废话不多说了，学习一下在react项目创建路由

对于react路由的创建，网上说法也有点多，有以下几种：

官方推荐安装react-router
百度到的安装react-router-dom不需要安装react-router，因为二者为包含关系，安装前者即可
两者都安装

没有谁对谁错，可能只是方法不一样，但经过验证，官方推荐的确实不太容易，所以只能换一个思路，第二个只安装react-router-dom，也有点懵，初学不容易看懂，那就只能暴力第三个了，简单容易

安装路由

$ npm install react-router
$ npm install react-router-dom

创建页面

// page/about.js
import React from "react";

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

// page/home.js
import React from "react";

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

修改app.js界面

import './App.css';
import React from 'react'

function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

修改index.js

import React from 'react';
import {render} from 'react-dom';
import {Link, Route} from "react-router-dom";
import Inbox from "./page/inbox";
import About from "./page/about";
import {Router} from "react-router";
import { createBrowserHistory } from "history";
const history = createBrowserHistory();

export default class Hello extends React.Component{
    render() {
        return (
            <div>
                <Router history={history}>
                    <header>
                        <Link to="/">Inbox</Link>&nbsp;
                        <Link to="/about">About</Link>
                    </header>

                    <main>
                        <Route exact path="/" component={Inbox} />
                        <Route exact path="/about" component={About} />
                    </main>
                </Router>
            </div>
        )
    }
}

render(
    <Hello/>,
    document.getElementById("root")
)

// 
$ npm start

一个简单的路由例子，后续得认真看下前端了，感觉前端的语法糖写起来也很舒服，官网推荐的Next.js也有点意思，后面准备学习一下

喜欢编程的，请关注我的博客https://www.lzmvlog.top/

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

登录后参与评论

0 条评论

热度