[react] router props 값 이동

해당 예제는 검색 input 에서 입력되는 값을 다른 router 로 보내 처리해주는 방식이다

 

head.js 

 

function Header({onChange}) {

return (

	<div>
    	<form>
        	<input type="text" name ="query" placeholder = "검색" onChange = {onChange}/>
        </form>
    </div>

)

}

 

App.js

 

function App() {

	const [search, setSearch] = useState("");
    const onChange = (event) => {
    	setSearch(event.target.value)
    }

return (

	<BrowserRouter>
    
    <Header onChange = {onChange} />
    <Side_bar/>
    
    <Routes>
    
    <Route path = "/home" element{<Home search = {search} /> } />
    
    </Routes>
    
    <Footer/>
    
    </BrowerRouter>

)

}

useState 사용 했던 이유는 onchange 값이 바뀌면 home 화면도 바뀌기 위함이다.

 

Home.js

 

function Home(props) {


return (

	<div id ="main" class="main">
    
    	{props.search}
    
    </div>

)

}

 

props.search 에 값이 전달된다.