reactjs - react-router 链接更改 url 但路由组件不呈现

问题描述

我一直在尝试实现 react-router-dom，但它似乎（可能）与 Redux 或 Redux-persist 冲突。我的 index.js 看起来像

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Terms from './Terms'
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { persistor, store } from './configureStore'
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

const ReduxWrapper = () => {
    return (
        <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Router>
          <Switch>
            <Route 
              path="/" 
              component={App} 
            />
            <Route 
              path="/terms" 
              component={Terms} 
            />
          </Switch>
        </Router>
      </PersistGate>        
        </Provider>       
    )
}


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

在位于我的 App 组件内的 Drawer 菜单组件中，有一个 Link 组件（react-router-dom 包的一部分），单击该组件时，只会更改 URL，但不会触发重新渲染，以及不同的组件（条款）出现。

渲染 Link 组件的 Drawer.js 文件（只是渲染函数）：

import React from 'react'

import {
    Link,
    withRouter
  } from "react-router-dom";

function DrawerMenu(props){
    return (
        <div style={{display: props.display}}>
            <div style={styles.overlay}>
                <div style={styles.menu}>
                    <div style={styles.body}>
                        <div style={{left: 10, position: 'absolute', borderBottom: '1px solid white'}}>
                            <h2 style={styles.menuText}>Coins: {props.coins}</h2>
                        </div>
                        <div style={{left: 10, top: '15%', position: 'absolute',}}>
                            <Link to="/terms"><h2 style={styles.menuText}>Terms</h2></Link>
                        </div>
                        <div style={{bottom: 5, left: 10, position: 'absolute',}}>
                            <h2 onClick={() => props.logOut()} style={styles.menuText}>Log Out</h2>
                        </div>
                    </div>
                </div>
                <div onClick={() => props.toggle()} style={{height: '100%', width: '17%', position: 'absolute', right: 0}}>
                </div>
            </div>
        </div>
    )
}

export default withRouter(DrawerMenu)

const styles = {
    overlay:{
        backgroundColor: 'rgba(0,0,0,0.5)',
        top: 0,
        bottom: 0,
        right: 0,
        left: 0,
        position: 'fixed',
        zIndex: 10,
        display: 'flex-row'
    },
    menu:{
        backgroundColor: 'white',
        top: 0,
        bottom: 0,
        position: 'absolute',
        width: '83%',       
    },
    menuText:{
        color: 'white',
    },
    body:{
        backgroundColor: 'rgb(158,209,237)',
        width: '100%',
        height: '100%'
    },
}

标签： reactjsreduxreact-router

reactjs - react-router 链接更改 url 但路由组件不呈现

问题描述

解决方案

推荐阅读