Javascript React-向导航栏添加一个选项卡,用于处理页面数据,而不是调用路由重定向
我有一个react应用程序,我使用浏览器路由器和一个名为Navigation的组件进行导航 我想知道如何向Nav添加一个选项卡,该选项卡不用于导航,而是允许用户在特定页面上操作组件JSX 我不知道如何组织这个。我想我可以使用上下文API(也许?),但在我进入兔子洞之前,我想有人可能知道一种不同/更好的方法 下面是一些伪代码 Nav.jsJavascript React-向导航栏添加一个选项卡,用于处理页面数据,而不是调用路由重定向,javascript,reactjs,Javascript,Reactjs,我有一个react应用程序,我使用浏览器路由器和一个名为Navigation的组件进行导航 我想知道如何向Nav添加一个选项卡,该选项卡不用于导航,而是允许用户在特定页面上操作组件JSX 我不知道如何组织这个。我想我可以使用上下文API(也许?),但在我进入兔子洞之前,我想有人可能知道一种不同/更好的方法 下面是一些伪代码 Nav.js import React from "react"; function Navigation(props){ console.log
import React from "react";
function Navigation(props){
console.log(props)
return(
<ul>
<a href="/"> <li>Landing</li> </a>
<a href="/test"> <li>Test</li> </a>
<button>Invoke some action on /test</button>
{/* If I am on a page named /test I want this button to have the abillity to trigger a function on that page*/}
</ul>
)
}
export default Navigation
从“React”导入React;
功能导航(道具){
控制台日志(道具)
返回(
在/测试上调用一些操作
{/*如果我在名为/test的页面上,我希望此按钮能够触发该页面上的函数*/}
)
}
导出默认导航
App.js
import React from 'react';
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import Navigation from "./Navigation";
import Test from "./Test";
import { withRouter } from "react-router";
import {Switch} from 'react-router';
import logo from './logo.svg';
import './App.css';
function App(props) {
return (
<div className="App">
<BrowserRouter>
<div>
<Navigation/>
<Switch>
<Route exact path="/test" component={Test} />
<Route exact path="/some-stuff" component={Whatever} />
<Route exact path="/some-more-stuff" component={WhateverElse} />
<Redirect from="/*" to="/test" />
</Switch>
</div>
</BrowserRouter>
</div>
);
}
export default withRouter(App);
从“React”导入React;
从“react router dom”导入{BrowserRouter,Route,Redirect};
从“/Navigation”导入导航;
从“/Test”导入测试;
从“react router”导入{withRouter};
从“反应路由器”导入{Switch};
从“/logo.svg”导入徽标;
导入“/App.css”;
功能应用程序(道具){
返回(
);
}
使用路由器(App)导出默认值;
您想用tab做什么??我们不明白你的意思。我不明白第二段。您想在应用程序中声明路由,但在导航中声明链接吗?我想能够在导航中添加一个选项卡,当用户单击该选项卡时,它会调用特定页面/组件上的一个函数,该函数可操作该页面组件JSX。明白了吗?所以在不同的页面上更改一些内容,而不是当前页面上的内容?该页面不可见,对吗?不更改我当前所在页面上的某些内容。在我发布的示例中,我使用了一个名为Test的组件作为示例。