我想在其他组件中使用链接和路由以将Header组件用作导航栏，但这不起作用。这是我的代码，但是该链接无法在Reactjs中的组件之间进行更改。
App.js
import React, {Component } from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import Header from './Header';
import Body from './Body';
class App extends Component {
render() {
return (
<Router>
<Header></Header>
<Body></Body>
</Router>
);
}
}
export default App;
Header.js
import React, { Component } from 'react';
import {BrowserRouter as Link} from 'react-router-dom';
class Header extends Component {
render(){
return (
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/doc">Doc</Link>
</li>
</ul>
)
}
}
export default Header;
Body.js
import React, { Component } from 'react';
import {BrowserRouter as Route, Switch} from 'react-router-dom';
import Home from './Home';
import Doc from './Doc';
class Body extends Component {
render(){
return (
<Switch>
<Route path="/home" component={Home} ></Route>
<Route path="/doc" component={Doc} ></Route>
</Switch>
);
}
}
export default Body;
Home.js
import React, { Component } from 'react';
class Home extends Component {
render(){
return (
<h1>Home</h1>
)
}
}
export default Home;
Doc.js
import React, { Component } from 'react';
class Doc extends Component {
render(){
return (
<h1>Doc</h1>
)
}
}
export default Doc;
注：我签出了此链接，但这不足以回答我。How to work with Route and Link in two Components in ReactJS
您必须在您的[[Header类组件中更改以下行]
import {BrowserRouter as Link} from 'react-router-dom';
to
import {Link} from 'react-router-dom';
以及您类组件的更改
Body
import {BrowserRouter as Route, Switch} from 'react-router-dom';
到
import {Route, Switch} from 'react-router-dom';
import {BrowserRouter as Link} from 'react-router-dom';
应该是：
import { Link} from 'react-router-dom';
您可以看到已解决问题的工作示例here