Question

我正在尝试使用React Router 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”的空白页面”。如果有人知道这是为什么，请通知我。我已经阅读了许多教程，看来我正确地遵循了所有步骤。

Answer 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链接，在那儿工作正常。

希望它会对您有所帮助。

React Router对我的组件不起作用

1 个答案: