我有一个传递位置道具和儿童道具的路由器,但我不知道这些道具的正确类型。
这是使用react-router-dom的路由器...
import React,{ useReducer } from 'react';
import { BrowserRouter,Route,Switch } from 'react-router-dom';
import { globalContext,setGlobalContext } from './components/context';
import { Layout } from './components/layout';
import { defaultState,globalReducer } from './components/reducer';
import { Home } from './routes/home';
import { NotFound } from './routes/notFound';
const Router: React.FC = () => {
const [global,setGlobal] = useReducer(globalReducer,defaultState);
return (
<setGlobalContext.Provider value={{ setGlobal }}>
<globalContext.Provider value={{ global }}>
<BrowserRouter>
<Route
render={({ location }) => (
<Layout location={location}>
<Switch location={location}>
<Route exact path='/' component={Home} />
<Route component={NotFound} />
</Switch>
</Layout>
)}
/>
</BrowserRouter>
</globalContext.Provider>
</setGlobalContext.Provider>
);
};
export { Router };
在内部布局组件中,我有一个用于位置和子项的接口,但是由于我不知道这些类型的正确类型,因此最终使用了其中的任何一个,因此我的短绒棉就适合了。
import React from 'react';
interface PropsInterface {
children: any;
location: any;
}
const Layout: React.FC<PropsInterface> = (props: PropsInterface) => {
return (
<div>
<p>{props.location}</p>
<p>{props.children}</p>
</div>
);
};
export { Layout };
我得到的错误是'any'的类型声明丢失了类型安全性。考虑用更精确的类型替换它。 (无)tslint(1)
我可以从导入import { useLocation } from 'react-router-dom';
中获取位置