如何在 ReactJS 中設置路由？

Question

我正在嘗試設置路由以導航到我的 web 應用程序中的不同頁面。 主頁呈現得很好。 只有當我嘗試導航到不同的頁面時。 當我導航到不同的頁面時，它返回以下內容：

應用程序.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

關於.js

import React from 'react'


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

export default About

索引.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>

索引.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>

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

Answer 2

設置與 class 組件一起使用的路由

應用程序.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>
        )
    }
}

主頁.js

import React from 'react';

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

關於.js

import React from 'react';

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

服務.js

import React from 'react';

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

如何在 ReactJS 中設置路由？

問題描述

2 個解決方案

解決方案1
3 已采納 2019-10-25 17:45:43

解決方案2
1 2020-12-03 15:31:59

如何在 ReactJS 中設置路由？

問題描述

2 個解決方案

解決方案1 3 已采納 2019-10-25 17:45:43

解決方案2 1 2020-12-03 15:31:59

解決方案1
3 已采納 2019-10-25 17:45:43

解決方案2
1 2020-12-03 15:31:59