正文

请到「今天看啥」查看全文

);

export default Home;

• 创建about页面: 在components目录内创建一个About目录, 然后再About目录内创建一个About.js, 写入以下内容:

import About from 'react';

const About = () => (

这是关于页

);

export default About;

• 现在我们有两个组件了, 但是还没办法在浏览器内防问, 接下来创建路由:

先清空src/App.js内的内容, 然后写入以下内容:

import React from 'react';

import {

BrowserRouter as Router,

Route,

} from 'react-router-dom';

import Home from './components/Home/Home';

import About from './components/About/About';

const App = () => (

);

export default App;

• 现在命令行切到项目根目录, 执行yarn run start启动项目, 会自动在浏览器内防问 http://localhost:3000/, 这就是我们的 首页 组件哟, 可以手动修改url防问 关于页(http://localhost:3000/about) 组件.

公共组件

• 我们创建了两个组件, 并且都有自己的独立路由, 但是要防问需要手动输入, 太麻烦啦, 那我们可以创建一个 导航 组件:

在 components 目录下创建一个 Common 文件夹并创建 NavBar.js 内容如下:

import React from 'react';

import {

Link,

} from 'react-router-dom';

const NavBar = (props) => (

• Home
• About
• 来源于: { props.title }

);

export default NavBar;

• 现在我们有一个公共组件了, 接下来把它放到 Home 和 About 组件内:

请到「今天看啥」查看全文