如何根据 React 中的事件将一个组件添加到另一个组件中？

Question

我有两个组成部分。一个 SearchBar 和一个 NavBar。在主页中，我的中间有 searchBar，但是当我第一次输入内容时，我将用户重定向到另一个页面，在该页面中 SearchBar 组件嵌套到 Navbar 中并显示套装。

对于 React 初学者来说，good/best 实现此目标的方法是什么？我该怎么做？

const Search = () => {

    let location = useLocation();
    let navigate = useNavigate();
    const handleKeyDown = (event) => {
        if (event.key === 'Enter') {
            if (location.pathname === '/') {
                navigate('./List');
            }
        }
    }

    return (
        <div className="searchbar-container">
            <input className="searchbar" placeholder="get" onKeyDown={handleKeyDown}></input>
        </div>
    )
}

const Navbar = () => {
        return (
        <nav className='navigation'>
            <div className='left-slot'>
                <button>TITLE</button>
            </div>
            <div className='right-slot'>
                <button>LINK</button>
                <button>LINK</button>
            </div>
        </nav>
    )
}

const Home = () => {
    return (
        <Search></Search>
    )
}

function App() {

  return (
    <Router>
        <Navbar></Navbar>
        <Routes>
        <Route exact path='/' element={<Home />} />
        <Route path='/List' element={<List />} />
        </Routes>
    </Router>
  );
}

Answer 1

您可以调用 NavBar 上的组件并将搜索字符串推送到 url（如参数）或位置状态（但第一个更好）。

类似的东西：

if (event.key === 'Enter') {
 if (location.pathname === '/') {
  navigate(`./List/${searchValue}`);
 }
}

对于列表页面：

const {search} = useParams() // from router

您还需要在列表中添加路线：

<Route path='/list/:search' element={<List />} />

如果对你有好处，请告诉我

如何根据 React 中的事件将一个组件添加到另一个组件中？

How to add one component in another based on event in React?

components

routes

navbar

reactjs