React Router 不适用于我的组件答案

【问题标题】：React Router not working for my componentsReact Router 不适用于我的组件
【发布时间】：2019-05-10 02:39:52
【问题描述】：

我正在尝试使用反应路由器 v5。下面是我尝试使用 BrowserRouter 的 App.js 文件。

import React, {Component} from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react- 
router-dom';

import Navbar from './components/Navbar';
import Home from './components/home/Home';
import Projects from './components/projects/Projects';

<Link to="/projects">Projects</Link>;


class App extends Component{
    render(){i
        return (
            <Router>
                <div className="App">
                    <Navbar />
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route exact path="/projects" component={Projects} />
                    </Switch>
                </div>
            </Router>
        )
    }
};
export default App;

当我将“/projects”附加到“localhost:3000”时，我希望呈现项目页面，但我被带到一个空白页面，其中包含“/home/aaron/projects/website/src/index.html ”。如果有人可能知道这是为什么，请告诉我。我已经阅读了很多教程，并且似乎我正确地遵循了所有步骤。

【问题讨论】：

可能的语法错误：render(){i
你是不是偶然使用了create-react-app？

标签： reactjs react-router react-router-v5

【解决方案1】：

您的代码中有语法错误。下面的代码将为您工作。

import React, {Component} from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';

import Navbar from './components/Navbar';
import Home from './components/home/Home';
import Projects from './components/projects/Projects';


class App extends Component{
    render(){
        return (
            <Router>
                <div className="App">
                    <Navbar />
                    <Link to="/projects">Projects</Link>
                    <Switch>
                        <Route exact path="/projects" component={Projects} />
                        <Route exact path="/" component={Home} />
                    </Switch>
                </div>
            </Router>
        )
    }
};
export default App;

https://codesandbox.io/s/q8qrk6rmo4

这里是codesandbox链接，那里工作正常。

希望对你有所帮助。

【讨论】：