Javascript 在页面刷新之前,React路由不工作 import React,{useffect,useState}来自“React”; 从“@material ui/core”导入{Container、AppBar、排版、Grow、Grid、useTheme}; 从'react redux'导入{useDispatch}; 从“react Router dom”导入{BrowserRouter,Router,Route,Switch} 从“/actions/posts”导入{getPosts} 从“./components/Form/Form”导入表单 从“./styles”导入useStyles; 从“./components/Navbar/Navbar”导入导航栏 从“./components/Home”导入主页 从“./components/Auth”导入身份验证 常量应用=()=>{ 返回( ); } 导出默认应用程序;
这是导航栏,上面是路线。我使用express作为后端,不确定这是否是一个滚动Javascript 在页面刷新之前,React路由不工作 import React,{useffect,useState}来自“React”; 从“@material ui/core”导入{Container、AppBar、排版、Grow、Grid、useTheme}; 从'react redux'导入{useDispatch}; 从“react Router dom”导入{BrowserRouter,Router,Route,Switch} 从“/actions/posts”导入{getPosts} 从“./components/Form/Form”导入表单 从“./styles”导入useStyles; 从“./components/Navbar/Navbar”导入导航栏 从“./components/Home”导入主页 从“./components/Auth”导入身份验证 常量应用=()=>{ 返回( ); } 导出默认应用程序;,javascript,reactjs,express,Javascript,Reactjs,Express,这是导航栏,上面是路线。我使用express作为后端,不确定这是否是一个滚动 import React, { useEffect, useState } from 'react'; import { Container, AppBar, Typography, Grow, Grid, useTheme } from '@material-ui/core'; import { useDispatch } from 'react-redux'; import { BrowserRouter, Rou
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;
从“React”导入React;
从“@material ui/core”导入{AppBar,排版};
从'react router dom'导入{Link};
从“react Router dom”导入{BrowserRouter as Router};
从“@material ui/core”导入{工具栏、化身、按钮};
从“../../images/store.jpg”导入存储
从“./styles”导入useStyles;
常量导航栏=()=>{
const classes=useStyles();
报税表(
商场
家
创建存储
注册
登录
);
}
导出默认导航栏;
当我在浏览器中单击链接时,url会更改为正确的路径,但页面不会发生任何变化。在单击正确的页面加载后刷新时。但是,如果没有刷新,它就无法工作。看起来很简单,但不确定出了什么问题。它不工作,因为导航栏在
浏览器路由器
之外。在应用程序组件中移动BrowserRouter
,并从导航栏中删除Router
:
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;
返回(
);
您是否正在为链接使用
组件?请提供一个是的,让我以前从未使用过。我还是个新手。试着用react路由器的NavLink组件替换按钮。更多关于这个。NavLink会在你点击它时重定向,并防止页面重新加载。我认为这是沙盒链接
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>
);