Navbar.js 文件
import React, { Component } from 'react'
import { Link, Navigate } from "react-router-dom"
export default class Navbar extends Component {
fetchQuery = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const searchText = formData.get('search');
console.log(searchText)
this.props.setQuery(searchText);
<Navigate to="/keyword" replace={true}/>
}
render() {
return (
// <nav className="navbar navbar-expand-lg" style={{ backgroundColor: "#35374B" }} data-bs-theme="dark">
<nav className="navbar navbar-expand-lg" style={{ backgroundColor: "#820300" }} data-bs-theme="dark">
<div className="container-fluid">
<img src="favicon-32x32.png" alt="Logo" width="30" height="24" className="d-inline-block align-text-top " />
<Link className="mx-2 navbar-brand" to="/">KhabarDaar</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link" aria-current="page" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/business">Business</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/entertainment">Entertainment</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/health">Health</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/science">Science</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/sports">Sports</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/technology">Technology</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/random">Random</Link>
</li>
<li className="nav-item">
</li>
{/* <li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/contact">Contact</Link>
</li> */}
<li className="nav-item dropdown">
<Link className="nav-link dropdown-toggle" to="/" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Country
</Link>
<ul className="dropdown-menu">
<li><Link className="dropdown-item" to="/">India</Link></li>
<li><Link className="dropdown-item" to="/">USA</Link></li>
<li><Link className="dropdown-item" to="/">China</Link></li>
<li><Link className="dropdown-item" to="/">Russia</Link></li>
</ul>
</li>
{/* <li className="nav-item">
<Link className="nav-link disabled" aria-disabled="true">Disabled</Link>
</li> */}
</ul>
<form onSubmit={this.fetchQuery} className="d-flex" role="search">
<input name="search" className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-light" type="submit">Search</button>
</form>
</div>
</div>
</nav>
)
}
}
App.js 文件
import './App.css';
import React, { Component } from 'react'
import Navbar from './Components/Navbar';
import News from './Components/News';
import {
BrowserRouter as Router,
Route,
Routes
} from "react-router-dom"
export default class App extends Component {
constructor() {
super();
this.state = {
country: "in",
query: ""
}
}
setQuery = (q) => {
this.setState({ query: q })
}
render() {
return (
<>
<Router>
<Navbar setQuery={this.setQuery} />
<Routes>
<Route path="/" element={<News key="general" pageSize={9} country={this.state.country} category="general"></News>} />
<Route path="/business" element={<News key="business" pageSize={9} country={this.state.country} category="business"></News>} />
<Route path="/entertainment" element={<News key="entertainment" pageSize={9} country={this.state.country} category="entertainment"></News>} />
<Route path="/health" element={<News key="health" pageSize={9} country={this.state.country} category="health"></News>} />
<Route path="/science" element={<News key="science" pageSize={9} country={this.state.country} category="science"></News>} />
<Route path="/sports" element={<News key="sports" pageSize={9} country={this.state.country} category="sports"></News>} />
<Route path="/technology" element={<News key="technology" pageSize={9} country={this.state.country} category="technology"></News>} />
<Route path="/keyword" element={<News key="technology" pageSize={9} country={this.state.country} q={this.state.query}></News>} />
</Routes>
</Router>
</>
)
}
}
它没有将我重定向到 /keyword 路线。我不知道这里的确切问题是什么。我也参考了react-router-dom文档，但仍然没有任何线索。我的代码与文档中指定的完全一样。 https://reactrouter.com/en/main/components/navigate 我新添加了这个，因为每当它重定向到某个新路线时，我的网址栏都会显示该路线，但在这里它没有发生。然而 fetchQuery() 函数肯定被调用了
我看到您正在调用
fetchQueryNavigateNavigateuseNavigate()const navigate = useNavigate();
navigate("/keyword");