Question

[

import React, { Component } from "react";
import { BrowserRouter as Router , Route } from "react-router-dom";

const NewRout = () => {
  return(
    <p> MY ROUTE </p>
  );
}
class App extends Component {
  render() {
    return (
        <Router>
          <Route path="/signin" Component={NewRout} />
        </Router>
    );
  }
}

export default App;

] 1我在我的反应页面中使用路由器。但是我看不到输出。我从react-route-dom导入BrowserRouter和Route 并尝试在该路线中显示mt组件。但这对我不起作用。请帮助我解决此问题。谢谢

<BrowserRouter><Route path="signin" Component={Signin} /></BrowserRouter>

Answer 1

您的路径有误：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Link } from "react-router-dom";
import "./styles.css";

const Home = () => (
  <h1>
    Home <Link to="/signin">SING</Link>
  </h1>
);

const SingIn = () => (
  <h1>
    <Link to="/">Home</Link>
    This is singin page
  </h1>
);

ReactDOM.render(
  <div>
    <BrowserRouter>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/signin" component={SingIn} />
      </div>
    </BrowserRouter>
  </div>,
  document.getElementById("root")
);

现在找到http://localhost:port/singin，您将看到您的组件。

注意：我在您的路径前添加了/。这表示您将从signin的根开始进入/。

您需要使用一个名为exact的道具，该道具与确切的路线相匹配。

尝试一下SandBox

https://codesandbox.io/s/moj8kxp0nx

我在React页面中使用React Router 4，但是在Route path中看不到我的组件

1 个答案: