我是 React 新手,我正在做一个项目......但是我遇到了导航栏中给出的链接的路由问题。
这是我在导航栏中给出的链接
import React, { Component, usestate } from "react"
import {Link} from "react-router-dom"
Sport Head from "./Head"
import "./header.css"
const Header () => {
const [click, setclick] = useState(false)
return (
<>
<Head />
<header>
<nav className='flexSB'>
<ul className=(click? "mobile-nav": "flexSB ") onClick=(() => setClick(false))>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/courses'>Courses</Link>
</li>
<li>
<Link to='/about'>About</Link>
</li>
<li>
<Link to='/team'>Team</Link>
</li>
<li>
<Link to='/contact'>Contact</Link>
</li>
<li>
<Link to='/login'>Login</Link>
</li>
</ul>
<div className='start'>
应用程序.js
import "./App.css"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import About from "./components/about/About"
import CourseHome from "./components/allcourses/CourseHome"
import Team from "./components/team/Team"
import Contact from "./components/contact/Contact"
import Home from "./components/home/Home"
import SignIn from "./components/login/Login"
function App() {
return (
<>
<Router>
<Switch>
<Route exact path='/' component=[Home] />
<Route exact path='/about' component=(About) />
<Route exact path='/courses' component=(CourseHome />
<Route exact path='/team component(Team] />
<Route exact path='/contact' component=(Contact) />
<Route path="/login' component={SignIn] />
</Switch>
</Router>
</>
}
export default App
在这里我想我正确地执行了代码。我尝试了不同的方法,但仍然没有得到想要的结果。
每当我点击链接时,网址都会发生变化,但每次都需要重新加载页面才能重定向到相应的页面...
首先您应该更正语法错误。 (或者由于某种原因它似乎坏了。)
// useState instead of usestate
import React, { Component, useState } from "react"
// Add '=' after before parentheses
const Header = () => {}
// In Route, component={YourComponent}, not () or []
// And make sure to close them
<Route exact path='/' component={Home} />