react-router Link changes url but Route component doesn't render

Question

I've been trying to implement react-router-dom, but it seems to conflicting (potentially) with either Redux, or Redux-persist. My index.js looks like

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'));

In a Drawer menu component, located within my App component, there is a Link component (part of the react-router-dom package) which when clicked, only changes the URL, but doesn't trigger a re-render, and a different component (Terms) to appear.

The Drawer.js file where the Link component is rendered (just the render function):

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%'
    },
}

could you post the code for the Link?

Dor Lugasi-Gal
– Dor Lugasi-Gal

2020-01-20 14:25:48 +00:00
Commented Jan 20, 2020 at 14:25 — Dor Lugasi-Gal
– Dor Lugasi-Gal, Commented Jan 20, 2020 at 14:25
@DorLugasi-Gal Okay I made the changes

iThompkins
– iThompkins

2020-01-20 14:42:37 +00:00
Commented Jan 20, 2020 at 14:42 — iThompkins
– iThompkins, Commented Jan 20, 2020 at 14:42

Charlie · Accepted Answer · 2020-01-20 15:28:42Z

1

This is because you have the root path as the first in the switch.

The link to "/terms" is matching "/" in the switch and rendering that component. You can simply change the order of your routes or add 'exact' as an attribute to the route.

<Route path={"/"} component={App} exact>

answered Jan 20, 2020 at 15:28

Charlie

1621 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darkilen · Accepted Answer · 2020-01-20 15:54:20Z

1

You have to add exact key to your <Route path={"/"} component={App}>

You should now have this :

<Route path={"/"} component={App} exact>

Here the doc about exact key

edited Jan 20, 2020 at 15:54

answered Jan 20, 2020 at 14:48

Darkilen

5735 silver badges20 bronze badges

1 Comment

iThompkins Over a year ago

great answer, but I gave it to Charlie because he was first

Collectives™ on Stack Overflow

react-router Link changes url but Route component doesn't render

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related