React Router 链接需要重新加载,但 URL 发生了变化

问题描述 投票:0回答:1

我是 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

在这里我想我正确地执行了代码。我尝试了不同的方法,但仍然没有得到想要的结果。

每当我点击链接时,网址都会发生变化,但每次都需要重新加载页面才能重定向到相应的页面...

reactjs url react-router navbar reloading
1个回答
0
投票

首先您应该更正语法错误。 (或者由于某种原因它似乎坏了。)

// 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} />
© www.soinside.com 2019 - 2024. All rights reserved.