您需要添加react-router-dom 具有npm 或yarn. 添加这些模块后，需要将一些模块导入React应用程序。您将需要BrowserRouter, Route, NavLink, &；withRouter.

BrowserRouter 位于管理历史API的最外面的父组件上。理想情况下，您只需<App /> 在您的index.js 文件，但我认为在我的评论中不包含3个单独的文件，只包装我的<App /> 在此处进行响应。

内部任何组件BrowserRouter 可以使用<Route /> 和<NavLink />. Route 将根据请求URL触发，您可以手动键入地址或使用<NavLink /> 组成部分在下拉组件的底部，您将看到我在withRouter. 这为组件的道具添加了有用的信息，例如当前的url slug。

这里有一个简单的例子。

yarn add react-router-dom

// App.js
import React, {Component} from \'react\';
import { BrowserRouter, Route } from \'react-router-dom\';
import axios from \'axios\';

import \'./App.scss\';
import {wpAPI} from \'../../data/api\';
import FrontPage from \'../../templates/FrontPage\';
import Header from \'../Header/Header\';
import Post from \'../Post/Post\';
import Sidebar from \'../Sidebar/Sidebar\';
import Footer from \'../Footer/Footer\';
import Spinner from \'../Spinner/Spinner\';

// Create a React Component
class App extends Component {
    state = {
        pages: [],
        posts: [],
        postTypes: [],
        acf: [],
        events: [],
    };

    componentDidMount() {
        var keys = Object.keys(this.state);

        for ( var i = 0; i < keys.length; i++){
            this.getPosts(keys[i]);
        }
    }

    renderContent() {
        if ( this.state.pages ) {
            const {pages} = this.state;

            return (
                // Outermost element, contains single root child element.
                <BrowserRouter>
                    <section id="app" className="animated fadeIn">
                        <Header />
                        <main>
                            // Path = Url after domain & protocal
                            // Use render prop to pass props to component, else use component prop ex. component={FrontPage}
                            <Route path="/" exact render={(props) => <FrontPage {...props} pages={ pages } /> } />
                            <Route path="/about" exact render={(props) => <Post {...props} post={ this.state.pages[3] } /> } />
                        </main>
                        <Sidebar />
                        <Footer />
                    </section>
                </BrowserRouter>
            )
        }

        return <Spinner message=\'loading...\' />;
    }

    render() {
        return this.renderContent();
    }

    /**
     * Takes a post type, builds post type as array of post json in state
     *
     * @param  {[string]} type [Post Type]
     */
    getPosts = async (type) => {
        const response = await axios.get(wpAPI[type]);

        this.setState({[type]: response.data})
    }
};

export default App;

// Menu.js
import React, {Component} from \'react\';
import { library } from \'@fortawesome/fontawesome-svg-core\';
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
import { NavLink, withRouter } from \'react-router-dom\';
import \'./Dropdown.scss\';

library.add(faChevronDown, faChevronUp);

class Dropdown extends Component {
    constructor(props){
        super(props)

        const {title, list, to} = props;

        this.state = {
            listOpen: false,
            title: title,
            list: list,
            to: to,
        };
        // console.log(this.state);
    }

    handleClickOutside(){
        this.setState({
            listOpen: false
        })
    }
    toggleList(){
        this.setState(prevState => ({
            listOpen: !prevState.listOpen
        }))
    }

    render() {
        const {listOpen, title, list, to} = this.state;

        if ( list ) {
            return(
                <div className="dropdown dropdown__wrapper">
                    <header className="dropdown__header" onClick={() => this.toggleList()}>
                        <div className="dropdown__title">{title}</div>
                        {listOpen
                          ? <i className="fas fa-chevron-up"></i>
                          : <i className="fas fa-chevron-down"></i>
                        }
                    </header>
                    {listOpen && <ul className="dropdown__list">
                        {list.map((item) => (
                            <NavLink className="dropdown__item" key={item.id} to={item.to}>{item.title}</NavLink>
                        ))}
                    </ul>}
                </div>
            );
        }

        return(
            <div className="dropdown dropdown__wrapper">
                <div className="dropdown__header" onClick={() => this.toggleList()}>
                    <NavLink className="dropdown__title" to={to}>{title}</NavLink>
                </div>
            </div>
        );
    }
}

export default withRouter(Dropdown);

基本上你必须自己做。REST API只负责返回数据，前端完全由您负责。

我找不到任何可以直接放入项目中处理路由的代码，但是this article 似乎提供了使用React进行操作的最详细信息。