在页面刷新之前反应路线不起作用

Question

import React, { useEffect, useState } from 'react';
import { Container, AppBar, Typography, Grow, Grid, useTheme } from '@material-ui/core';
import { useDispatch } from 'react-redux';
import { BrowserRouter, Router, Route, Switch} from 'react-router-dom'

import { getPosts } from './actions/posts'
import Form from './components/Form/Form'
import useStyles from './styles';
import Navbar from './components/Navbar/Navbar'
import Home from './components/Home'
import Auth from './components/Auth'

const App = () => {

 
  return (
    <Container maxwidh='lg'>
      <Navbar />
      <Grow in>
        <Container>
        <div className="content">
        <BrowserRouter>
          <Switch> 
          <Route path="/" exact component={Home} />
          <Route path="/form" exact component={Form} />
          <Route path="/auth" exact component={Auth} />
          </Switch>
        </BrowserRouter>
      </div>
        </Container>
      </Grow>
    </Container>
   );
}



export default App;

这是导航栏，上面是路线。 我在后端使用 express，但不确定它是否正常运行。

import React from 'react';
import { AppBar, Typography } from '@material-ui/core';
import { Link } from 'react-router-dom';
import {BrowserRouter as Router} from "react-router-dom";
import { Toolbar, Avatar, Button } from '@material-ui/core';

import store from '../../images/store.jpg'
import useStyles from './styles';

const Navbar = () => {

    const classes = useStyles();

    return ( 
        <AppBar className = {classes.appBar} position='static' color='inheret'>
            <div className= {classes.brandContainer}>
                <Typography to='/' className = {classes.heading} variant='h2' align='center'>Store</Typography>
                <img className = {classes.image} src={store} alt="store" height='220' width='300' align='center' />
            </div>
            <div >
                <Router>
                <Button component={Link} to="/" variant="contained" color="primary">Home</Button>
                <Button component={Link} to="/form" variant="contained" color="primary">Create Store</Button>
                <Button component={Link} to="/auth" variant="contained" color="primary">Sign Up</Button>
                <Button component={Link} to="/login" variant="contained" color="primary">Login</Button>
                </Router>
            </div>
        
      </AppBar>
     );
}
 
export default Navbar;

当我单击浏览器中的链接时，url 更改为正确的路由，但页面没有任何反应。 当我点击正确的页面加载后刷新。 但是，如果不刷新它就无法工作。 看起来很简单，但不确定哪里出了问题。

Answer 1

它不起作用，因为 Navbar 在BrowserRouter之外。 在您的 App 组件中移动BrowserRouter并从导航栏中删除Router ：

 return (

  <Container maxwidh='lg'>
    <BrowserRouter>
      <Navbar />
      <Grow in>
        <Container>
          <div className="content">
           <Switch> 
             <Route path="/" exact component={Home} />
             <Route path="/form" exact component={Form} />
             <Route path="/auth" exact component={Auth} />
           </Switch>
          </div>
        </Container>
      </Grow>
   </BrowserRouter>
 </Container>

   );

Answer 2

或者你可以这样做。 您的 App 组件必须使用 BrowserRouter 进行包装。

  ReactDOM.render(
  <Router history={history}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Router>,
  document.getElementById("root")
);