npm install react-router-dom --save
npm install semantic-ui-css --save

注意點

頁面跳轉到上一頁面：this.props.history.goBack()

<Button basic onClick={() => { this.props.history.goBack() }}>
    <Icon name="reply"></Icon>
    Return to list
</Button>

頁面跳轉到某一個頁面：this.props.history.push("/about");

在src資料夾下面，建立一個資料夾home，下面建立一個home.js

import React, { Component } from 'react'
class home extends Component {
  goPage() {
    this.props.history.push("/about");
  }
  render() {
    return (
        <div>
          這是home頁面
          <button onClick={() => this.goPage()}>頁面跳轉到about</button>
        </div>
    )
  }
}
export default home
 

在src資料夾下面，建立一個資料夾about，下面建立一個about.js

import React, { Component } from 'react'
class about extends Component {
    goHistory() {
        this.props.history.goBack()//返回到上一頁
    }
    render() {
        return (
            <div>
                這是about頁面
                <button onClick={() => this.goHistory()}>頁面跳轉到上一頁面</button>
            </div>
        )
    }
}
export default about
 

在src資料夾下面，建立一個資料夾contact，下面建立一個contact.js

import React, { Component } from 'react'
class about extends Component {
  render() {
    return (
        <div>這是about頁面</div>
    )
  }
}
export default about

App.js

import React, { Component } from "react";
import "./App.css";
import Home from "./home";
import About from './about'
import Contact from './contact'
import {
	BrowserRouter as Router,
	Route,
	Link
} from 'react-router-dom';
import { Menu, Dropdown, Divider } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
class App extends Component {
	render() {
		return (
			<Router>
				<div>
					<Menu fixed="top" style={{position:'relative'}}>
						<Menu.Item as="a" href='/'>Home</Menu.Item>
						<Dropdown item simple text="User">
							<Dropdown.Menu>
								<Dropdown.Item as="a" href="/about">
									About
                                </Dropdown.Item>
								<Dropdown.Item as="a" href="/contact">
									Contact
                                </Dropdown.Item>
							</Dropdown.Menu>
						</Dropdown>
					</Menu>
					<div className="content">
						<Route exact path="/" component={Home} />
						<Route path="/about" component={About} />
						<Route path="/contact" component={Contact} />
					</div>
					{/* <Divider /> */}
				</div>
			</Router>
		);
	}
}
export default App;