时间戳

首页 > 解决方案 > React js没有使用反应路由器导航到页面

javascript - React js没有使用反应路由器导航到页面

问题描述

如果我在我的 http://localhost:3000/anything 中输入任何内容，它将与我输入 home 或/或登录一样，什么都没有。该页面将是空白的。

我的social.js：

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';

import Home from '../../containers/Pages/Home/Home';
import Login from '../../containers/Pages/Login/Login';

class Social extends Component {
    render () {
        return (
            <div>
                <Switch>
                    <Route path="/home" exact component={Home} />
                    <Route path="/login" exact component={Login} />
                </Switch>
            </div>
        );
    }
}

export default Social;

应用程序.js：

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';

import Layout from './Layout/Layout'
import Social from './containers/Pages/Social';

class App extends Component {
  render() {
    return (
    <BrowserRouter>
        <div className="App">
        <Layout>
            <Social />
        </Layout>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

有什么想法有什么问题吗？谢谢。

----- 编辑，我注意到当我<Layout> ... </Layout>从 app.js 中删除它时它可以工作。

我的 Layout.js：

import React, { Component } from 'react';

import Toolbar from '../components/Navigation/Toolbar/Toolbar';

class Layout extends Component {
    
    render() {
        return (
        <>
            <Toolbar />
        </>
        );
    }
}

export default Layout;

和工具栏：

import React, { Component } from 'react';

import classes from './Toolbar.module.css';

class toolbar extends Component {
    
    render() {
        return(
        <>
            <header className={classes.Toolbar}>
                toolbar
            </header>
        </>
        );
    }
    
}

export default toolbar;

标签： javascriptreactjs

解决方案

我认为您缺少Toolbar组件周围的包装元素

    import React, { Component } from 'react';
    
    import Toolbar from '../components/Navigation/Toolbar/Toolbar';
    
    class Layout extends Component {
        
        render() {
            return (
           <div>
                <Toolbar />
            <div>
            );
        }
    }

export default Layout;

与工具栏相同。应该如下：

import React, { Component } from 'react';

import classes from './Toolbar.module.css';

class Toolbar extends Component {
    
    render() {
        return(
        <div>
            <header className={classes.Toolbar}>
                toolbar
            </header>
        </div>
        );
    }
    
}

export default Toolbar;

推荐阅读