React 路由器仅适用于 / 路径

Posted 2023-02-22

【中文标题】React 路由器仅适用于 / 路径

【英文标题】：React router only works with / path

【发布时间】：2017-08-28 06:37:12

【问题描述】：

为什么只工作根路径，当我到达 localhost:8090/about 时 说的。无法获取 localhost:8090/about

import React,Component from "react"
    import BrowserRouter as Router,Route from "react-router-dom"

var About =()=>
    return <div>About us</div>


class App extends Component
render()
return (
    <Router>
 <div>
      <Route path ="/" component=About/>
      <Route path ='/about'component=About/>
</div>
    </Router>
);


export default App;

main.js 入口点（webpack）

import React from "react"
import ReactDOM from "react-dom"
import App from "./components/App.jsx"

ReactDOM.render(

       <App />,
      document.getElementById('table')
);

我正在使用“react-router-dom”：“^4.0.0-beta.7”

【参考方案1】：

在你的组件中添加一个Link，来改变路由，这样写：

import BrowserRouter as Router,Route, Link from "react-router-dom"

class App extends Component
  render()
    return (
      <Router>
        <div>
           <Link to='/about'>About </Link>
           <Route path ="/" component=About/>
           <Route path ='/about'component=About/>
        </div>
      </Router>
    );
  

export default App;

【讨论】：

非常有帮助）th'x