如何正确使用 react-router

Question

有点新反应，喜欢图书馆，但遇到路由器各种头痛。

这是我目前的代码，问题如下：

// 路由.js

var React = require('react');
var ReactDOM = require('react-dom');
import {Router, Route, IndexRoute, browserHistory} from 'react-router';

import App from './App';
import MainLayout from './components/MainLayout';
import Home from './components/home/Home';
import Product from './components/product/Product';
import Category from './components/category/Category';
import Cart from './components/cart/Cart';
import NotFound from './components/NotFound';

export default (
  <Router history={browserHistory}>
    <Route component={App} >
      <Route path='/' component={Home} />
      <Route path='/product/:productId' component={Product} />
      <Route path='/category/:catNumber' component={Category} />
      <Route path='/cart' component={Cart} />
    </Route>
    <Route path='*' component={NotFound} />
  </Router>
)

现在，我遇到了三个主要问题，这让我觉得我可能只是严重误解了路由器的工作原理。

1) 来自 react [http://localhost:3002/#/?_k=xv1opy] 的奇怪 url 哈希，即使它们不应该存在，因为我已经设置了 history={browserHistory}

2) 浏览器控制台警告：“警告：位置“/”不匹配任何路线”和“警告：您无法更改；它将被忽略。”不知道这里发生了什么，因为我已经非常清楚地定义了 Home 组件来渲染 path='/'。

3) 可能相关，但每当我更改路线时，整个应用程序都会重新加载，清除我所有的商店数据。不理想，但我认为一旦我修复了#1 和（尤其是）#2，就可以解决这个问题。

更多可能有用的信息：

// app.js 渲染() 方法

render() {
return (
  <div>
    <Header />
    <Subheader />
    {this.props.children}
    <Footer />
  </div>
);

}

// index.js

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import Routes from './routes';

if ( process.env.NODE_ENV !== 'production') {
  window.React = React;
}

ReactDOM.render(Routes, document.getElementById('main'));

任何对 React 更熟悉的人可以在这里为我指明正确的方向吗？在过去的两天里一直在为此拉头发，并且似乎阅读了所有关于 react-router 的指南都无济于事。

Answer 1

您的路由有点缺陷。试试这个：

<Router history={browserHistory}>
  <Route path='/' component={App} >
    <IndexRoute component={Home} />
    <Route path='product/:productId' component={Product} />
    <Route path='category/:catNumber' component={Category} />
    <Route path='cart' component={Cart} />
  </Route>
  <Route path='*' component={NotFound} />
</Router>

这应该可以解决您的大部分错误。

Answer 2

路由可以很方便的输入“localhost:3000/”类型我们可以得到登录页面，如果只通过创建登录页面和其他页面组件来获取

        import React from 'react';
        import { Component } from "react";
        import { BrowserRouter, Switch, Route } from 'react-router-dom';
        import "bootstrap/dist/css/bootstrap.min.css";
        import login from './components/loginpage-component';
        import signup from './components/signup-component';
        render(){
        return (
         <BrowserRouter>
             <Switch>
                <Route exact path="/" component={login} /> 
                <Route exact path="/signup" component={signup} /> 
                <Route exact path="/live" component={live}/>
             </Switch>  
         </BrowserRouter>
         );
        }

        }
       export default App;

Answer 3

1. 使用 yarn 或 npm

   安装 react-router-dom

   yarn add react-router-dom

2. 像这样导入 react-router

   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

3. 这样使用

   <Switch> <Route path="/scopes"> <Scopes /> </Route> <Route path={"/disciplines"}> <Disciplines /> </Route> <Route path={"/fields"}> <Fields /> </Route> <Route path={"/issues"}> <Issues /> </Route> <Route path={"/articles"}> <Articles /> </Route> <Route path={"/indexing"}> <Indexing /> </Route> <Route path={"/settings"}> <Settings /> </Route> </Switch>

4. 现在您可以像这样创建到每个路由器的链接

   <Link to="/articles">Articles</Link>

   导入链接为： import { Link } from 'react-router-dom'

Answer 4

如果你关注这个文档https://reactrouter.com/web/guides/quick-start，它会说

第 1 步： 移动到项目文件夹并键入 npm install react-router-dom --save

第 2 步： 导入路由文件

App.js

import React from 'react;
import {BrowserRouter as Router,Switch,Route} from "react-router-dom";

import Home from './components/home/Home';
import Product from './components/product/Product';
import Category from './components/category/Category';
import Cart from './components/cart/Cart';

const App = () => {
 return (
  <div>

   <Router>
    <Switch>

      <Route exact path="/">
        <Home />
      </Route>
      //by providing exact attribute will only match if the path matches the exact location else if we don't provide it will never render other components because it renders the first one that matches the current URL 
      <Route path="/product">
       <Product />
      </Route>
      <Route path="/category">
       <Category />
      </Route>
      <Route path="/cart">
       <Cart />
      </Route>
    </Switch>
   </Router>

 </div>
)
}
export default App;