seo Question posted in
Some basic information to get you started with this can be found here.

Using React Router inside a MaterialUI sidebar – SEO

I created this content by using a MaterialUI code (https://material-ui.com/components/drawers/). I also tried modifying it to implement some Routers. The idea is that some of the buttons in the sidebar would change the content. Here is the code I am using:

export default function Main(props) {
  const { window } = props;
  const classes = useStyles();
  const theme = useTheme();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen)
  }

  const drawer = (
    <div>
        <div className={classes.toolbar} />
        <Divider />
        <List>
            <Link to='/'>
                <ListItem button>
                    <ListItemIcon><HomeIcon /></ListItemIcon>
                    <ListItemText primary="Home" />
                </ListItem>
            </Link>
            <ListItem button>
                <ListItemIcon><GamesIcon /></ListItemIcon>
                <ListItemText primary="Play Game" />
            </ListItem>
            <ListItem button>
                <ListItemIcon><AddBoxIcon /></ListItemIcon>
                <ListItemText primary="Create Game" />
            </ListItem>
            <Link to='/add_question'>
                <ListItem button>
                    <ListItemIcon><AddBoxIcon /></ListItemIcon>
                    <ListItemText primary="Add Questions" />
                </ListItem>
            </Link>
            <ListItem button>
                <ListItemIcon><AddBoxIcon /></ListItemIcon>
                <ListItemText primary="Add Question Categories" />
            </ListItem>
            <ListItem button>
                <ListItemIcon><AddBoxIcon /></ListItemIcon>
                <ListItemText primary="Add Participants" />
            </ListItem>
        </List>
    </div>
  );

  const container = window !== undefined ? () => window().document.body : undefined;

  return (
    <Router>
        <div className={classes.root}>
            <CssBaseline />
            <AppBar position="fixed" className={classes.appBar}>
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        edge="start"
                        onClick={handleDrawerToggle}
                        className={classes.menuButton}
                    >
                        <MenuIcon />
                    </IconButton>
                <Typography variant="h3" noWrap>
                    Trivia Game
                </Typography>
            </Toolbar>
        </AppBar>
            <nav className={classes.drawer} aria-label="mailbox folders">
            {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
                <Hidden smUp implementation="css">
                    <Drawer
                        container={container}
                        variant="temporary"
                        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                        open={mobileOpen}
                        onClose={handleDrawerToggle}
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        ModalProps={{
                            keepMounted: true, // Better open performance on mobile.
                        }}
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
                <Hidden xsDown implementation="css">
                    <Drawer
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        variant="permanent"
                        open
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
            </nav>
            <main className={classes.content}>
                <div className={classes.toolbar} />
                <Switch>
                    <Route path='/'>
                        <CreateCategories />
                    </Route>
                    <Route path='/add_question'>
                        <CreateQuestions />
                    </Route>
                </Switch>
            </main>
        </div>
    </Router>
  );
}

The problem I’m having is that when I click the buttons with a Link, it is not changing the content. When the content loads, it shows the content linked to /, but I can’t change it when I press the buttons. As you can see I have two links right now, but like I mentioned they aren’t switching.

Also as a side question, is there anyway I can use these Routers to completely replace the content in the page? All the examples I’ve seen require that you have some sort of navigation in place, but what if I want to change to a different page with a different navigation?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    This was the problem: The way React Router works is, when Routes are inside a Switch, it will render whenever the path you're linking matches the Route. So for example, I wanted to go to /add_question, but since my first route has a /, and /add_question also has a /, it matches it immediately. There are two ways to fix this: Either you put the / Route last inside your Switch, or you use the word exact in your Route, so that the / Route only renders if the path is exactly /.

                <Switch>
                <Route path='/' exact>
                    <CreateCategories />
                </Route>
                <Route path='/add_question'>
                    <CreateQuestions />
                </Route>
            </Switch>

  2. 0

    Did you try with

    withRouter(Component);

    I have fixed my problem with it.

    Login or Signup to reply.
  3. 0

    you can try use useHistory hook build-in or history API HTML5 instead. It’s one option for you.

    history.pushState

    history.replaceState

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search