Question

我正在尝试向我的react项目添加路线。我有三个独立的组件：

Window.js

import React, { Component } from 'react';
import SideBar from "../SideBar/SideBar";
import MainBody from "../MainBody/MainBody";
import  { BrowserRouter as Router} from "react-router-dom";

class Window extends Component{
    render() {
        return (
        <div>
        <Router>
                <SideBar />
                <MainBody />
        </Router>
        </div>
        );
    }
}

export default Window

SideBar.js

import React, { Component } from 'react';
import PropTypes from "prop-types";
import  { BrowserRouter as Link} from "react-router-dom";

class SideBar extends Component {
     render() {
         return(

            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
         );
     }
}

export default SideBar;

MainBody.js

import React, { Component } from 'react';
import Home from "./Home/Home";
import About from "./About/About";
import  { BrowserRouter as Route} from "react-router-dom";

class MainBody extends component {
     render() {
         return(
            <div>
            <Route exact path="/" component={Home}>
            <Route path="/about" component={About}>
            </div>
         );
     }
}

export default MainBody;

因此，基本上，当我单击补充工具栏中的链接之一时，我想过渡到主体中的该链接（“主页”和“关于”仅显示其标题）。但是，当我运行此程序时，我的Window，MainBody和SideBar组件正常工作，但是我的Home和About组件未显示。我已将路由器组件正确导入到每个组件文件中。如果我将MainBody的路由放到Window组件中，则会显示它们（尽管不确定路由器链接是否可以使用）。任何建议都会有所帮助！

Answer 1

该代码段中几乎没有错别字，如果在重写时产生错字，或者在您的代码库中有错字，则要小心，但要小心（组件而不是Component，错误地编写了具有多个返回元素的渲染函数等）。

import  { BrowserRouter as Link} from "react-router-dom";

这些导入也是错误的，您必须导入Link而不是Link。您仅将导入BrowserRouter重命名为Link。

import  { Link } from "react-router-dom";

与路线相同。

这里是示例codesanbox。让我知道这是否是您想要的。

在单独的文件中对路由器进行反应

1 个答案: