javascript - 如何将变量传递给子组件,以便它们与 React Router 一起使用?
问题描述
我在设置允许跨组件使用 React Router 的基本 React 应用程序时遇到问题。当我在 App.js 中有以下代码片段时,它似乎一切正常,但是,我无法将信息传递给子组件。
我尝试将 JSX 对象传递给组件,如下所示:
<Main component={Home} />
但这在尝试访问 Main 子组件中的属性时似乎不起作用。
应用程序.js
import React from 'react';
import './App.css';
import { NavLink, Switch, Route } from 'react-router-dom';
import Navigation from './components/navigation.js';
import Main from './components/main.js';
const App = () => (
<div className='app'>
<h1>Portfolio Website</h1>
<Navigation />
<Main home={Home} about={About} />
</div>
);
const Home = () => (
<div className='home'>
<h1>Welcome to my portfolio website</h1>
<p> Feel free to browse around and learn more about me.</p>
</div>
);
const About = () => (
<div className='about'>
<h1>About Me</h1>
</div>
);
export default App;
主.js
import React, { Component } from 'react';
import { NavLink, Switch, Route } from 'react-router-dom';
const Main = () => (
<Switch>
<Route exact path='/' component={this.props.Home}></Route>
<Route exact path='/about' component={this.props.About}></Route>
</Switch>
);
export default Main;
导航.js
import React from 'react';
import { NavLink } from 'react-router-dom';
const Navigation = () => (
<nav>
<ul>
<li><NavLink exact activeClassName="current" to='/'>Home</NavLink></li>
<li><NavLink exact activeClassName="current" to='/about'>About</NavLink></li>
</ul>
</nav>
);
export default Navigation;
我希望我能够使用创建的导航来加载组件内容,就像不在单独的组件中时一样。不知道我哪里出错了?谢谢
解决方案
我根本不会做这样的事情。我认为您的主要组件是多余的。
这将导致你的每一个组件都通过这个组件。
路由器本身就是一个组件,所以为什么不使用以下内容:
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Navigation from "./yournavigationcomponent"
import Home from "./home"
import About from "./about"
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation />
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
推荐阅读
- php - 我想用 codeigniter 中的登录时间更新 jwt 令牌
- sql - 对索引列执行多个查询时,表是否被锁定?
- javascript - 加载资源失败:服务器响应状态为 404(), Deploy with github pages
- c# - 如何对带有硬编码参数的方法进行单元测试?
- mysql - 如何在 MySQL 中做到这一点?
- python - 如何在python中按下按钮进行冷却
- mysql - 通过 SQL 语句的 Moodle-Enrolement-Course-Information
- temporal-workflow - 时间:何时以及如何使用本地活动?
- docker - 两个docker都可以设置主机网络模式吗?
- c# - ItemsControl ItemTemplate DataTemplate 触发器未触发