Question

我正在尝试设置路由以导航到Web应用程序中的不同页面。主页呈现得很好。仅当我尝试导航到其他页面时。当我导航到其他页面时，它将返回以下内容：

App.js

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import React from 'react'
import { Component } from 'react';
import ReactDOM from "react-dom"
import Nav from '../navigation/Nav'
import '../css/App.css'
import About from '../components/About'
import Shop from '../components/Shop'

function App(){ 
return (
        <Router>
            <div className="App">
                <Nav /> 
                <Route path="/about" component={About} />           
            </div>
        </Router>
    )       
    }


export default App

About.js

import React from 'react'


function About(){
    return (
        <div className="About">
            <h1>This is the About page</h1>
        </div>
    )
}

export default About

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My React App</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

index.html
ReactDOM.render( < App /> , document.getElementById('app'));

**编辑：**
版本：

    "dependencies": {
        "react": "^16.11.0",
        "react-dom": "^16.11.0",
        "react-router-dom": "^5.1.2"
    }

Answer 1

尝试将App.js文件中的<Router>更改为：

<Router>
  <div>
    <Nav />
    <Switch>
         <Route exact component={withRouter({About})} path="/about" />
    </Switch>
  </div>

您将要使用exact，因为它会返回任意数量的完全匹配的路由。我添加了switch，因为它呈现了与位置匹配的第一个孩子<Route>。

编辑：您还必须更改Nav组件。导航栏中的链接之一的示例：

<li class="nav-item">
      <Link to='/about' class="nav-link" href="/about">About</Link>
</li>

确保在Nav.js组件中包括：import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';！

Answer 2

设置与类组件一起使用的路由

App.js

import React from 'react';
import {BrowserRouter as Router, Route,Link} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Services from './Services';

export default class App extends React.Component{
  render(){
    return(
          <Router>
            <Link to="/">Home </Link>
            <Link to="/about"> About </Link>
            <Link to="/services"> Services</Link>

            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/services" component={Services} />
          </Router>
        )
    }
}

Home.js

import React from 'react';

export default class Home extends React.Component{
  render(){
     return(
        <h2>This is the Home page</h2>
        )
   }
}

About.js

import React from 'react';

export default class About extends React.Component{
render(){
    return(
        <h2>This is the About page</h2>
        )
   }
}

Services.js

import React from 'react';

export default class Services extends React.Component{
render(){
    return(
        <h2>This is the Services page</h2>
        )
    }
 }

如何在ReactJS中设置路由？

2 个答案: