我在Codesandbox.io上构建了一个简单的应用程序,并且正在为路由而苦苦挣扎,实际上我正在学习教程,但对我来说不起作用。
这是我的代码,它包含四个文件(index,Start,Home和Nav),这些文件除了显示一个单词(Home或Start here)外没有其他内容,这是我的主文件(index.js) )
import React from "react";
import ReactDom from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "./styles.css";
import "./news.css";
import Nav from "./Nav";
import Home from "./Home";
import Start from "./Start";
class Index extends React.Component {
render() {
return (
<div>
<div className="container"> start here </div>
<Router>
<div>
<Nav />
<Route exact path="/" Component={Index} />
<Route path="/Home" Component={Home} />
<Route path="/Start" Component={Start} />
</div>
</Router>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDom.render(<Index />, rootElement);
这是我的Home.js
import React from "react";
class Home extends React.Component {
render() {
return <div>home</div>;
}
}
export default Home;
Nav.js
import React from "react";
import { Link } from "react-router-dom";
const Nav = () => {
return (
<div>
<Link to="/">Home</Link>
<Link to="/Home"> home 2 class </Link>
<Link to="/Start"> Start </Link>
</div>
);
};
export default Nav;
Start.js
import React from "react";
class Start extends React.Component {
render() {
return <div>start here</div>;
}
}
export default Start;
答案 0 :(得分:2)
您很亲密,大写的Component={Home}
,小写的component
,就像这样。
我似乎无法编辑您的沙箱,因为Index
正在破坏我的代码,但是,总的来说,这似乎是您的问题。
或者,您可能尝试使用render
方法来显示相应的组件-Route Render Methods
干杯! 吉米
答案 1 :(得分:0)
您错过了switch
,必须使用switch进行路由。
这样的导入开关。
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
然后使用开关更新渲染
<Router>
<Switch>
<div className="container">
<Nav />
<Route exact path="/" Component={Index} />
<Route path="/Home" Component={Home} />
<Route path="/Start" Component={Start} />
</div>
</Switch>
</Router>