[英]React routes not working until page refresh
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 更改為正確的路由,但頁面沒有任何反應。 當我點擊正確的頁面加載后刷新。 但是,如果不刷新它就無法工作。 看起來很簡單,但不確定哪里出了問題。
它不起作用,因為 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>
);
或者你可以這樣做。 您的 App 組件必須使用 BrowserRouter 進行包裝。
ReactDOM.render(
<Router history={history}>
<BrowserRouter>
<App />
</BrowserRouter>
</Router>,
document.getElementById("root")
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.