我正在尝试使用react建立我的第一个网站,而导航方面遇到了很多麻烦。我正在使用react-router,由于某种原因,我的代码正在更改页面顶部的url,但没有呈现适当的组件。
这是我的navbar.jsx:
import React, { Component } from "react";
import { Link, BrowserRouter } from "react-router-dom";
class Navbar extends Component {
render() {
return (
<BrowserRouter>
<div>
<ul>
<li><Link to={"/test"}>Test</Link></li>
</ul>
</div>
</BrowserRouter>
)
}
}
export default Navbar;
这是test.jsx:
import React, { Component } from "react";
class Test extends Component {
state = {};
render() {
return (
<div>
<h1>Test</h1>
</div>
);
}
}
export default Test;
有人知道为什么这会更改url(如预期的那样),却不呈现test.jsx吗?
答案 0 :(得分:0)
您需要使用Route来渲染不同路线的组件。
import React, { Component } from 'react';
import { Link, BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import Test from './import-path-of-test-component';
class Navbar extends Component {
render() {
return (
<BrowserRouter>
<div>
<ul>
<li>
<Link to={'/test'}>Test</Link>
</li>
</ul>
<Switch>
<Route exact path="/test" component={Test} />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default Navbar;